1

ここにネストされたulを含む単純なulメニューがあります

リンクがクリックされたときにネストされたメニューを下にスライドさせ、2回目のクリックで再び上にスライドさせたいです。これは機能しています。

別のリンクがクリックされたときに閉じるために、他の開いているネストされたメニューも必要です。これは機能していません。

必要なネストされたメニューを開く前に、これを使用して開いているネストされたメニューを閉じようとしましたが、ネストされたメニューのリンクをクリックすると、ネストされたメニューも閉じます。

$(document).ready(function () {
    $('#nav ul.children').slideUp();
    $('#nav li').click(function (e) {
        $('ul.children').slideUp();
        $('ul', this).slideToggle();
        e.stopPropagation();
    });
});

http://www.ttmt.org.uk/forum/nav/index2.html

親がクリックされたときにネストされたメニューをslideToggleし、別のリンクがクリックされたときに開いているネストされたメニューを閉じるにはどうすればよいですか。

<ul id="nav">
   <li><a href="#">One</a>
     <ul class="children">
        <li><a href="http://www.google.com">One/One</a></li>
        <li><a href="http://www.bbc.com">One/Two</a></li>
        <li><a href="#">One/Three</a></li>
     </ul>
   </li>
   <li><a href="#">Two</a></li>
   <li><a href="#">Three</a>
     <ul class="children">
        <li><a href="#">Three/One</a></li>
        <li><a href="#">Three/Two</a></li>
     </ul>
   </li>  
 </ul>


 $(document).ready(function(){
   $('#nav ul.children').slideUp();
   $('#nav li').click(function(e){
     //$('ul.children').slideUp();
     $('ul', this).slideToggle();
     e.stopPropagation();
   });
 });

編集

最初にネストされたulを閉じるため、コードに別の大きな問題があります。

$('#nav ul.children').slideUp();

リンクがクリックされてページがリロードされると、すべてのメニューが閉じられます。ページがリロードされたときにネストされたメニューを開いたままにするにはどうすればよいですか。

4

2 に答える 2

1

サブアイテムがクリックされたときのアクションを防ぐには、これを使用します。

$('#nav > li').click(function(e){ ...

「>」文字は、子孫とは対照的に子である李を選択します

...そのため$('ul.children').slideUp();、サブメニューのリンクをクリックしても発生しません。

于 2012-04-25T09:33:01.790 に答える
0

まず、ページの読み込み時にcssスタイルを使用して非表示になっているすべてのネストされたulタグを非表示にして、2番目の問題(ページ読み込み)を解決します

 li ul
 {
   display:none;
 }

このスクリプトを入れて

 $("#nav li").click(function(){
    $(this).parent().find("li ul:visible").slideUp(); //this helps to slideUp visible uls
    //then your code
 });
于 2012-04-25T10:12:54.907 に答える