JQuery下拉菜單問題

我有一個簡單的水平菜單，當單擊父href時，它使用JQuery垂直向下滑動帶有無序列表的div。當我只有兩個選項卡時，它可以正常工作，但當超過2時不會發生。當超過2時，SlideToggle會發生一些情況，最終會多次切換而不是一次。我對JQuery比較陌生，這讓我很難過。任何幫助是極大的讚賞！JQuery下拉菜單問題

這裏是JQuery的

<script type="text/javascript"> 
    $(function(){ 
     $(document).ready(function() { 
     $('a.menu_button').click(function (e) { 
      e.preventDefault(); 
      var $this = $(this); 
      var ulId = $this.attr("href"); 
      $this.parent().find("ul").not(ulId).slideUp("medium", function() { 
      $ul = $this.parent().find("ul" + ulId) 
      $ul.slideToggle('medium'); 


      }); 
     }); 
     }); 
    }); 
    </script>

這裏是HTML。我沒有包括CSS，因爲我認爲它沒有任何相關性，但如果有幫助，我可以發佈它。

<div id="menus"> 
      <a href="#menu1" class="menu_button" id="home"></a> 
      <a href="#menu2" class="menu_button" id="aboutus"></a> 
      <a href="#menu3" class="menu_button" id="admissions"></a> 

      <ul class="the_menu" id="menu1"> 
      <li><a href="#">A Website #3</a></li> 
      <li><a href="#">A Website #4</a></li> 
      <li><a href="#">A Link #1</a></li> 
      <li><a href="#">A Link #2</a></li> 
      <li><a href="#">A Website #3</a></li> 
      <li><a href="#">A Website #4</a></li> 
      <li><a href="#">A Link #3</a></li> 
      <li><a href="#">A Link #4</a></li> 

      </ul> 
      <ul class="the_menu" id="menu2"> 
      <li><a href="#">A Website #1</a></li> 
      <li><a href="#">A Website #2</a></li> 
      <li><a href="#">A Link #1</a></li> 
      <li><a href="#">A Link #2</a></li> 
      <li><a href="#">A Website #3</a></li> 
      <li><a href="#">A Website #4</a></li> 
      <li><a href="#">A Link #3</a></li> 
      <li><a href="#">A Link #4</a></li> 

      </ul> 

      <ul class="the_menu" id="menu3"> 
      <li><a href="#">A Website #1</a></li> 
      <li><a href="#">A Website #2</a></li> 
      <li><a href="#">A Link #1</a></li> 
      <li><a href="#">A Link #2</a></li> 
      <li><a href="#">A Website #3</a></li> 
      <li><a href="#">A Website #4</a></li> 
      <li><a href="#">A Link #3</a></li> 
      <li><a href="#">A Link #4</a></li> 

      </ul> 

      <div class="clear"></div> 
     </div>

如果剔除第三UL和錨標記，但只要三分之一加在它工作正常，就會切換太多次。

這裏是CSS

ul, li { 
margin:0; 
padding:0; 
list-style:none; 
} 

div#menus { 
position: relative; 
background-color: #302f2f; 

} 

a.menu_button { 
display: inline-block; 
margin-right: -4px; 
margin-bottom: 0px; 
} 

.menu_button img { 
border:1px solid #1c1c1c; 
    display: block; 
} 

.the_menu { 
display:none; 
width:1000px; 

} 

.the_menu li { 

} 

.the_menu li a { 
color:#FFFFFF; 
text-decoration:none; 
padding:10px; 
display:block; 
float:left; 
} 

.the_menu li a:hover { 
padding:10px; 
font-weight:bold; 
color: #F00880; 
} 


.clear { 
clear: both; 
} 

#home { 
background: url(button_sprite.png); 
background-position: 0px 0px; 
width:125px; 
height:30px; 
float:left; 
} 

#aboutus { 
background: url(button_sprite.png); 
background-position: -126px 0px; 
width:125px; 
height:30px; 
float:left; 
} 

#admissions { 
background: url(button_sprite.png); 
background-position: -252px 0px; 
width:125px; 
height:30px; 
float:left; 
}

編輯：當一個不同的HREF被點擊，而人下來，我希望活動的一個第一向上滑動，然後再新建一層滑下。

來源

2011-07-17 Alex

我想你的代碼，這部分問題所在 -

$this.parent().find("ul").not(ulId).slideUp("medium", function() { 
      $ul = $this.parent().find("ul" + ulId) 
      $ul.slideToggle('medium'); 


      });

匿名函數獲取調用n次，其中n是在你的頁面減去一個UI元素的數量。所以當你有2個ul元素時，這個函數被調用一次，一切都可以工作，但是當你有3個ul元素時，函數會被調用兩次，你會看到奇怪的行爲。試着改變你的代碼這一點 -

編輯（通過例如在jsbin工作後改變原碼）

$(function(){ 
    $(document).ready(function() { 
    $('a.menu_button').click(function (e) { 
     e.preventDefault(); 
     var $this = $(this); 
     var ulId = $this.attr("href"); 
     var clicked_menu_is_visible = $this.parent().find("ul" + ulId).filter(':visible').length > 0; 
     var visible_uls = $this.parent().find("ul").filter(':visible'); 
     if (visible_uls.length === 0) { //no menus showing - just show clicked menu 
     $ul = $this.parent().find("ul" + ulId); 
     $ul.slideToggle('medium'); 
     } 
     else { //close open menus (should only be one open) then open clicked menu 
      //via callback 
     $this.parent().find("ul").filter(':visible').slideUp("medium", function() { 
      $ul = $this.parent().find("ul" + ulId); 
      //open clicked menu - unless menu was already open when clicked 
      if (!clicked_menu_is_visible) $ul.slideToggle('medium'); 
     }); 
     } 
    }); 
    }); 
});

來源

2011-07-17 16:00:26 ipr101

這個固定的它獲取調用n次的問題，所以它只能切換一次。但是，在之前，如果在一個已經關閉的情況下點擊了不同的href，它會向下滑動一個，然後向下滑動被點擊的那個。現在，它只是在已經倒閉的那個之上滑動新的。 – Alex

嗯，那不好。你可以發佈CSS嗎？ – ipr101

我編輯了原稿並在幾分鐘前發佈。它顯示給我，讓我知道如果它沒有顯示給你。如果沒有圖像，菜單看起來不會很漂亮，但它應該給你它的基本功能。 – Alex

在這裏可能會有一些幫助，你的jQueries中似乎有很多不必要的遍歷。你所描述的內容可以用下面的方法完成：

$('a.menu_button').click(function(){ 
    $($(this).attr("href")).slideDown(); 
});

但是，這並沒有形成一個非常漂亮的菜單。首先，因爲它依賴於UL的原生位置，而不是被點擊的A.其次，因爲沒有規定「去除」。也許翻轉菜單更合適？

來源

2011-07-17 15:59:10 Sinetheta

JQuery下拉菜單問題

回答

相關問題