2016-03-18 29 views
1

Bir Submenu ile ilgili bir sorun yaşıyorum.Açılır alt menü sorunu

Alt menüyü (Menü veya Li> Metin'i tıklattığımda) GÖSTERIM. Örneğin, ONE

öğesini tıklattığımda Show alt menüsü Ayrıca, kişi diğer Menüyü tıklatırsa diğer alt menüyü de kapatın (Li> Metin). Örneğin, ONE'in alt menüsü açıksa ve İki'yi tıklatırsam, Bir'in alt menüsü kapanır.

Ancak alt menüsünü açmak/kapatmak için geçerli kodumla değiştirilemiyorum. Örneğin, Bir'i tıklarsam Alt Menüyü gösterir. Ama şunu istiyorum: Bir'de tekrar tıklarsam, Alt Menüyü kapatın.

Herkes bana yardım edebilir mi?

İşte benim kod

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

Çok teşekkürler olduğunu! Ben yeniyim: D

cevap

2

Ben sadece bir satır kaldırıldı: my snippet'te beklenen davranış

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

+0

sorun ise

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

kontrol edebilirsiniz .. Kullanıcı Birini Tıklattıktan Sonra İki Tıklatıldığında ... Her iki alt menü de GÖRÜNÜMdür. Zaman ayırdığınız için teşekkürler: D – Peter

+0

Oh Cevabımı düzenleyeyim :) –

+0

Bu arada ... Bir fikrin var mı? @Quentin Roger – Peter

İlgili konular