ドロップダウンサブメニューの問題

サブメニューを表示できます（メニューまたはLi>テキストをクリックすると表示されます）。たとえば、ONEをクリックしたときにサブメニューを表示する

また、他のメニュー（Li>テキスト）をクリックすると、他のサブメニューも閉じます。たとえば、ONEのサブメニューが開いていてTwoをクリックすると、Oneのサブメニューが閉じられます。

しかしサブメニューを開く/閉じるを現在のコードで切り替えることはできません。たとえば、1をクリックすると、サブメニューが表示されます。しかし、私はそれが欲しい1つをもう一度クリックすると、サブメニューを閉じます。

誰でも手伝ってもらえますか？

は、ここに私のコード

<head><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
    <script> 
$(document).ready(function(){ 

$(".menu .expanded .menu ").hide(); 



    $("li:has(ul)").click(function() { 
    $(".menu .expanded .menu ").hide(); 
     $("ul", this).toggle('fast'); 
    }); 

}); 

    </script> 
    </head> 


    <body> 

    <ul class="menu"> 
     <li class="expanded">One 
       <ul class="menu"> 
        <li>One 1</li> 
        <li>One 2</li> 
        <li>One 3</li> 
        <li>One 4</li> 
       </ul> 
      </li> 

     <li class="expanded">Two 
       <ul class="menu"> 
        <li>Two 1</li> 
        <li>Two 2</li> 
        <li>Two 3</li> 
        <li>Two 4</li> 
       </ul> 
      </li> 

     <li class="expanded">Three 
       <ul class="menu"> 
        <li>Three 1</li> 
        <li>Three 2</li> 
        <li>Three 3</li> 
        <li>Three 4</li> 
       </ul> 
      </li> 
    </ul> 
</body>

どうもありがとうです！私は新しいです：D

出典

2016-03-18 Peter

私は一行削除：私のスニペットでその期待される動作は

$(document).ready(function() { 
 
    var previousTarget = null; 
 
    $("ul", "li").toggle('fast'); 
 
    $("li:has(ul)").click(function() { 
 
    $(".menu .expanded .menu").hide('fast'); 
 
      
 
    if (this === previousTarget && $(this).children().css('display')!='none') { 
 
     $(this).children().hide('fast'); 
 
    } else { 
 
     $(this).children().show('fast'); 
 
    } 
 
    previousTarget = this; 
 
    return false; 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 

 
    <ul class="menu"> 
 
     <li class="expanded">One 
 
       <ul class="menu"> 
 
        <li>One 1</li> 
 
        <li>One 2</li> 
 
        <li>One 3</li> 
 
        <li>One 4</li> 
 
       </ul> 
 
      </li> 
 

 
     <li class="expanded">Two 
 
       <ul class="menu"> 
 
        <li>Two 1</li> 
 
        <li>Two 2</li> 
 
        <li>Two 3</li> 
 
        <li>Two 4</li> 
 
       </ul> 
 
      </li> 
 

 
     <li class="expanded">Three 
 
       <ul class="menu"> 
 
        <li>Three 1</li> 
 
        <li>Three 2</li> 
 
        <li>Three 3</li> 
 
        <li>Three 4</li> 
 
       </ul> 
 
      </li> 
 
    </ul> 
 
</body>

出典

2016-03-18 18:11:02

問題がある場合

$(".menu .expanded .menu ").hide();

あなたがチェックできます。..ユーザーが1つをクリックし、次に2つをクリックすると...両方のサブメニューが表示されます。ありがとうございました：D – Peter

ああ私は私の答えを編集する:) –

ところで...あなたはアイデアを持っていますか？ @クエンティン・ロジャー – Peter

ドロップダウンサブメニューの問題

答えて

関連する問題