открыть подменю onclick и закрыть открытое подменю

Question

Я использую JS-код для отправки подменю из меню, нажимая на элементы li. , когда я нажимаю на элемент li, когда подменю slideToggle и если подменю уже открыто, то это slideUp. Он работает отлично.

Но у меня есть только одна проблема, когда вы нажимаете на li из моего подменю, это slideUp, а затем SlideToggle снова, как я могу предотвратить это?

Вот мой JQuery:

$("#menu li").click(function() { 
    $('ul.sub-menu').not($(this).children()).slideUp(); 
    $(this).children("ul.sub-menu").slideToggle(); 
}); 

и вот что я пытался до сих пор без особого успеха:

$("#menu li").not($('#menu li sub-menu li a')).click(function() { 
    $('ul.sub-menu').not($(this).children()).slideUp(); 
    $(this).children("ul.sub-menu").slideToggle(); 
}); 

вот мой HTML:

<ul id="menu"> 
<li><a href="#">1</a></li> 
<li>2 
<ul class="sub-menu"> 
<li><a href="#">2.1</a></li> 
<li><a href="#">2.2</a></li> 
</ul> 
</li> 
<li>3 
<ul class="sub-menu"> 
<li><a href="#">3.1</a></li> 
</ul> 
</li> 
<li><a href="#">4</a></li> 
<li><a href="#">5</a></li> 
<li><a href="#">6</a></li> 
</ul> 

и мой CSS:

.sub-menu {display:none} 

и Jsfiddle, чтобы увидеть его в действии:

http://jsfiddle.net/2s023cfc/1/

может кто-нибудь помочь мне с этим? благодаря

Answer 1

Попробуйте this-

$("#menu li").not($('#menu li sub-menu li a')).click(function (e) { 
     $('ul.sub-menu').not($(this).children()).slideUp(); 
     $(this).children("ul.sub-menu").slideToggle(); 
     e.stopPropagation() 
    }); 

Вы должны остановить распространение.

Answer 2

Укажите, на какой элемент вы нацеливаете событие в JQuery!

$("#menu > li > a").click(function() { 
 
    $('ul.sub-menu').not($(this).siblings()).slideUp(); 
 
    $(this).siblings("ul.sub-menu").slideToggle(); 
 
});

.sub-menu { 
 
    display:none 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="menu"> 
 
    <li><a href="#">1</a></li> 
 
    <li><a href="#">2</a> 
 
     <ul class="sub-menu"> 
 
      <li><a href="#">2.1</a></li> 
 
      <li><a href="#">2.2</a></li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="#">3</a> 
 
     <ul class="sub-menu"> 
 
      <li><a href="#">3.1</a> 
 
      </li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="#">4</a> 
 
    </li> 
 
    <li><a href="#">5</a> 
 
    </li> 
 
    <li><a href="#">6</a> 
 
    </li> 
 
</ul>