드롭 다운 메뉴가 닫히지 않는 jQuery

누군가 내가 잘못하고있는 것을 설명 할 수 있습니까? 첫 번째 링크 (링크 1)를 클릭하면 메뉴가 열립니다. 닫히는 메뉴 안에 'li'중 하나를 클릭하면 메뉴가 열립니다. 메뉴.드롭 다운 메뉴가 닫히지 않는 jQuery

두 번째 링크 (링크 2)를 클릭하면 다른 메뉴가 열리지 만 메뉴 안의 'li'중 하나를 클릭하면 아무 일도 일어나지 않으며 메뉴를 닫으려고합니다.

jsfiddle (http://jsfiddle.net/BdhxL/)

HTML 코드 :

<a href="#">Link 1</a> 
     <div id="dropMenu"> 
      <ul> 
      <li><a href="#index">Portfolio</a></li> 
      </ul> 
     </div> 
<br><br> 
    <a href="#">Link 2</a> 
     <div id="dropMenu"> 
      <ul> 
      <li><a href="#index">Contact us </a></li> 
      </ul> 
     </div>

JS 코드 :

$(document).ready(function() { 
    $("li").click(function() 
    { 
    $("#dropMenu").hide("slow"); 
    }); 

    $("a").click(function() 
    { 
    $(this).toggleClass("active"); 
    $(this).next("div").stop('true','true').slideToggle("slow"); 
    }); 
}); 

#dropMenu { 
    display: none; 
    position: relative; 
    right: 5px; 
    background: #000; 
    color: black; 
    margin:50px -5% 0% -142%; 
    padding: 0px 0px 0px 10px; 
} 

#dropMenu a { 
    display: block; 
    color: #fff; 
    text-decoration: none; 
    padding:10px 6px; 
    font-weight:400; 
    border-bottom: solid 1px #fff; 

}

CSS 코드 :

#dropMenu ul { 
    margin:0; 
} 

#dropMenu a:hover { 
    background: #57585A; 
} 

#dropMenu ul { 
    list-style:none; 
    padding:0; 
}

출처

2014-04-22 Carlos Perez

당신은 중복 ID를 가지고있다. $("#dropMenu").hide("slow");은 항상 첫 번째 dropMenu를 대상으로합니다. 당신이 도움을

$(document).ready(function() { 
$("li").click(function() 
{ 
    $(this).closest("div").hide("slow"); 
}); 

$("a").click(function() 
{ 
    $(this).toggleClass("active"); 
    $(this).next("div").stop('true','true').slideToggle("slow"); 
});});

Working Demo

출처

2014-04-22 02:20:02

감사합니다,하지만 당신은 한 번만 메뉴를 열 수있는이 솔루션의 문제는 경우입니다 :이 가장 가까운 div.Try 현재를 대상으로하고 숨길 $(this)를 사용하여 메뉴를 닫으면 다시 열 수 없습니다. –

@CarlosPerez : upadted answer.check. –

는 현재 당신이있어 중복이있는 <div id="dropMenu">입니다 목록의 부모의 div id를 교부가 대신 클래스를 사용해야합니다 :

$(document).ready(function() { 
    $("li").click(function() { 
     $(this).closest(".dropMenu").hide("slow"); 
    }); 

    $("a").click(function() { 
     $(this).toggleClass("active"); 
     $(this).next("div").stop('true', 'true').slideToggle("slow"); 
    }); 
});

당신에게 :

이

<div class="dropMenu">

다음 .closest()가 가장 가까운 클릭 li의 .dropMenu 일치 대상으로 사용할 수 있습니다 CSS의 #dropMenu에서 .dropMenu으로 모두 변경해야합니다.

Updated Fiddle

출처

2014-04-22 02:18:26 Felix

드롭 다운 메뉴가 닫히지 않는 jQuery

답변

관련 문제