2016-03-18 3 views
1

У меня проблема с подменю.Выпадающее подменю issue

Я могу ПОКАЗАТЬ подменю (когда я нажимаю на Меню или Ли> Текст). Например, Показать подменю, когда я нажимаю 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

ответ

2

Я удаляется только одну строку:

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

+0

Проблема заключается в том .. Когда пользователь щелкает один, а затем два раза ... Оба подменю VISIBLE. Спасибо за ваше время: D – Peter

+0

О, я отредактировал свой ответ так :) –

+0

Кстати ... У вас есть идея? @Quentin Roger – Peter

Смежные вопросы