드롭 다운 탐색을 열었지만 닫을 수 없습니다 (jQuery)

Question

Jquery와 CSS를 사용하여 탐색을 아래로 만들었습니다. 특정 버튼을 클릭하면 열리지 만 버튼을 다시 클릭하면 닫을 수 없습니다.

 $("#shadow").css("height", $(document).height()).hide(); 

    $(".menubutton").click(function() { 
    $(".thetopmenu").css("padding","0px"); 
    $(".thetopmenu").css("display","block"); // Displayes the menu 
    $(this).addClass("active"); // Add "active" class to selected tab 
    $("#shadow").toggle(); 
    }); 

    $(".close").click(function() { 
    $(".thetopmenu").css("display","none"); 
    $(".menubutton").removeClass("active"); 
    $("#overlay").css("display","none"); // Removes "active" class to selected tab 
    $("#shadow").toggle(); 
    }); 

: 여기에 내가 (내가 그것을 폐쇄에 대한 "닫기"버튼을 만들었지 만 당신이 오프닝했던 것과 같은 버튼을 클릭하면이 닫히지 할 것)

jQuery를 사용하고 코드입니다

CSS :

 .menubutton { 
     margin: 0; padding: 6px 0 0 0; 
     background: url(images/menu.png) no-repeat left top; 
     width: 44px; height: 16px; 
     position: absolute; 
     right: 10px; 
     top: 20px; 
     text-align: center; 
     display: block; 
     text-transform: uppercase; 
     color: #c3c3c3; 
     text-shadow: 0px -1px 0px #4f4f4f; 
     font-family: MPSemibold, Arial; 
     font-size: 10px; 
     text-decoration: none; 
    } 

    .menubutton:link { 
     text-transform: uppercase; 
     color: #c3c3c3; 
     text-shadow: 0px -1px 0px #4f4f4f; 
     font-family: MPSemibold, Arial; 
     font-size: 10px; 
     text-decoration: none; 
    } 


    .menubutton:active, .menubutton.active, menubutton:hover { 
     background: url(images/menuh.png) no-repeat left top; 
     color: #fff; 
    }  

    .thetopmenu { 
     display: none; 
     position: absolute; 
     left: 0; 
     z-index: 999; 
     top: 61px; 
     width: 100%; 
    } 

HTML :

<a href="#" class="menubutton"><span>Menu</span></a> 
      <div class="thetopmenu"> 
       <ul id="content"> 
       <li><a href="ladies.php">Ladies' Collection</a></li> 
       <li><a href="gents.php">Gents' Collection</a></li> 
       <li><a href="store.php">Store Locator</a></li> 
       <li><a href="#" class="close">Close</a></li> 
       </ul> 
      </div> 

#shadow 그냥 화면의 나머지 부분을 페이드 아웃 및 잎 정상적인 메뉴. 꽤 간단하다고 생각하지만 jQuery에서는 그리 좋지 않습니다.

는

Answer 1

당신은 같은 것을하지 말아야 감사합니다

$(".menubutton").click(function() { 
    if($(this).css("display") == 'none') 
    { 
    $(".thetopmenu").css("padding","0px"); 
    $(".thetopmenu").css("display","block"); // Displayes the menu 
    $(this).addClass("active"); // Add "active" class to selected tab 
    $("#shadow").toggle(); 
    } 
    else 
    { 
    $(".thetopmenu").css("display","none"); 
    $(".menubutton").removeClass("active"); 
    $("#overlay").css("display","none"); // Removes "active" class to selected tab 
    $("#shadow").toggle(); 
    } 
    }); 

어쩌면 내가 오해를 해요,하지만 버튼이 두 번째 클릭에 당신의 의도를 알 것 더 보이는 방법이 없습니다.

Answer 2

하나의 트릭은 열 때 클래스를 추가 한 다음 해당 클래스를 다시 확인하여 닫고 싶은 것을 이해하고 클래스를 제거하는 것입니다.

이미 다른 이유로 클래스를 추가 및 제거하고 있기 때문에 원하는 것을 얻을 수있는 가장 좋은 방법 일 수 있습니다.

$(".menubutton").click(function() { 
    if ($(this).is('.active')) { 
     $(".thetopmenu").css("display","none"); 
     $(this).removeClass("active"); 
    } else { 
     // Displayes the menu 
     $(".thetopmenu").css({ 
     padding : "0px", 
     display: "block" 
     }); 
     $(this).addClass("active"); // Add "active" class to selected tab 
    } 
    $("#shadow").toggle(); 
    }); 

는 희망이 도움이, 시몬