JQueryスライド・ダウン・メニューの質問

Question

jQueryを使用して、親hrefがクリックされたときに、順序なしリストでdivを垂直方向にスライドさせる単純な水平メニューがあります。 2つ以上のタブがある場合はうまく動作しますが、2より大きい場合はうまく動作しません.2以上の場合、SlideToggleで何かが起こり、1回ではなく複数回トグルします。私は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およびアンカータグを取る場合は正常に動作します、しかし、すぐに第三があったようで追加され、それは1あまりにも多くの時間を切り替えます。ここで

は、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; 
} 

EDITです：1がダウンしている間、別のHREFをクリックすると、私は、新しいものを下にスライドして、アクティブな1が最初に上にスライドします。

Answer 1

-

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


      }); 

匿名関数は、nは、ページのマイナス1のUL要素の数をn回呼び出さなっています。したがって、2 ulの要素を持つと、関数は一度呼び出され、すべてが機能しますが、3 ulの要素がある場合、関数は2回呼び出され、奇妙な動作が見られます。これにあなたのコードを変更してみてください -

EDIT（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'); 
     }); 
     } 
    }); 
    }); 
}); 

Answer 2

ここで少しの文脈が役立つかもしれませんが、jQueryで不必要なトラバースが行われているようです。あなたが説明したことは、次のようにして達成できます：

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

しかし、それは非常にきれいなメニューにはなりません。まず、クリックしたA.の代わりにULのネイティブの位置に依存しているため、第2の理由は、「削除」の規定がないためです。たぶんロールオーバーメニューが適切でしょうか？

私はどこに問題があるあなたのコードのこの部分があると思い