下拉子菜單問題

我有一個子菜單有問題。下拉子菜單問題

我可以顯示子菜單（當我點擊Menu或Li> Text時）。例如，當我點擊一個時顯示子菜單

另外，如果人點擊其他菜單（李>文本），關閉另一個子菜單。例如，如果ONE的子菜單是打開的，並且我點擊兩個，One的子菜單就會關閉。

但是我無法用我當前的代碼切換來打開/關閉子菜單。例如，如果我點擊One，它會顯示子菜單。但我希望如果再次點擊One，關閉子菜單。

任何人都可以幫到我嗎？

這裏是我的代碼

<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

我只刪除一行：

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

您可以檢查它在我的片段預期的行爲

$(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

的問題是.. 。當用戶單擊一個，然後單擊兩個...這兩個子菜單都是可見的。感謝您的時間：D – Peter

哦，我編輯我的答案，所以:) –

順便說一句...你有想法嗎？ @Quentin羅傑 – Peter

下拉子菜單問題

回答

相關問題