使用jquery隱藏和顯示相同的按鈕菜單

我找到了一些使用jQuery的下拉菜單教程。它工作正常，但我想稍微調整一下。我不想使用懸停來隱藏菜單，而想使用顯示菜單的相同按鈕，以便在再次按下時隱藏菜單。因此，同一個按鈕必須隱藏並顯示下拉菜單。使用，即時通訊的腳本：使用jquery隱藏和顯示相同的按鈕菜單

$(document).ready(function() { 

     $("ul.subnav").parent().append("<span></span>"); //Only shows drop down trigger when js is enabled - Adds empty span tag after ul.subnav 

     $("ul.topnav li span").click(function() { //When trigger is clicked... 

      //Following events are applied to the subnav itself (moving subnav up and down) 
      $(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click 

      $(this).parent().hover(function() { 
      }, function() { 
       $(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up 
      }); 

      //Following events are applied to the trigger (Hover events for the trigger) 
     }).hover(function() { 
      $(this).addClass("subhover"); //On hover over, add class "subhover" 
     }, function() { //On Hover Out 
      $(this).removeClass("subhover"); //On hover out, remove class "subhover" 
     }); 

    });

來源

2012-08-16 Christian

使用jQuery的.toggle()http://api.jquery.com/toggle/

$("#yourbutton").click(function() { 
    $("#yourmenu").toggle(); 
});

來源

2012-08-16 17:40:22

哈，打我吧。相同的假身份證和一切。 – jackwanders 2012-08-16 17:41:23

哈哈 - 輝煌 – 2012-08-16 17:42:25

偉大:)謝謝:) – Christian 2012-08-16 19:16:08

您可以保存自己從加入使用jQuery的.toggle方法的CSS規則。

$('#yourMenu').toggle()

這將隱藏它，如果它是可見的，並顯示它，如果它隱藏。您可以添加一個數字或'fast', 'slow'作爲參數使其具有動畫效果。

來源

2012-08-16 17:40:56 jackwanders

jQuery.toggle()功能將做到這一點對你的工作：

$("#button").on('click', function() { 
    $("#menu").toggle(); 
});

來源

2012-08-16 17:42:21

是，toggleClass可以使用。或者你也可以在javascript中定義你自己的切換功能。你可以在類之間切換或做任何你想要的其他功能。

function tog(elemen){ if(elemen.className == "show") { hide drpdwn elemen.className="hide"; } else { make dropdwn visible elemen.className="show"; } }

來源

2012-08-16 17:46:08

使用jquery隱藏和顯示相同的按鈕菜單

回答

相關問題