Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

html javascript Dropdown menu 만들기 중 오류 #143

Closed
SangminJe opened this issue Jan 14, 2018 · 1 comment
Closed

html javascript Dropdown menu 만들기 중 오류 #143

SangminJe opened this issue Jan 14, 2018 · 1 comment
Labels
JavaScript 백서
Milestone
코딩야학 3기

Comments

@SangminJe
Copy link

SangminJe commented Jan 14, 2018 •
edited
Loading

증상

코드를 짜고 실행 시 드롭다운 하위 메뉴가 나오지 않습니다.
페이지 요소검사 결과 캡쳐한 부분과 같은 오류가 발생하는데, 함수의 내용을 지속적으로 바꿔도 일단 변하지 않습니다.

실행환경

윈도우/ 크롬에서 실행

<!doctype html>
<html>
  <head>
    <title>Jessie</title>
    <meta charset="utf-8">
      <link rel="stylesheet" href="style.css">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
      <script src="colors.js" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">

      </script>
  </head>

  <body>
    <div class="navbar">
      <div class="dropdown">
        <button class="dropbtn" onclick="myFunction()">About_Jessie
          <i class="fa fa-caret-down"></i>
        </button>
        <div class="dropdown-content" id="myDropdown">
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
        </div>
      </div>
      <a href= "2.html">Likes</a>
      <a href= "3.html">Portfolio</a>
      <a href= "4.html">Contacts</a>
    </div>
-----------------------------------------------------------------colors.js 파일-----------

function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(e) {
  if (!e.target.matches('.dropbtn')) {
    var myDropdown = document.getElementById("myDropdown");
      if (myDropdown.classList.contains('show')) {
        myDropdown.classList.remove('show');
      }
  }
}

캡쳐

image
@dhchoi82
Copy link

dhchoi82 commented Jan 14, 2018 •
edited
Loading

하나의 script 태그의 src 속성을 여러 개 적어서 문제가 되는 듯 합니다.
제가 시험삼아 해보니 위와 같이 하나의 script 태그에 두 개의 src를 지정한 소스는 정상적으로 작동하지 않는 것을 확인할 수 있고,
image
서로 다른 script 태그에 각각의 src를 지정한 소스는 정상적으로 작동하는 것을 확인할 수 있습니다.
image

@happydeveloper happydeveloper added this to the 코딩야학 3기 milestone Jan 23, 2018
@blackdew blackdew closed this as completed Aug 9, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
JavaScript 백서
Projects
None yet
Milestone
코딩야학 3기
Development

No branches or pull requests
4 participants
@blackdew @happydeveloper @dhchoi82 @SangminJe