當我點擊.menu李所有子菜單同時打開？

Question

請幫助我，我遇到了很大的麻煩，並尋找完美的解決方案。

$('.menu li').mouseover(function() { 
 
    $('.menu li .submenu').hide(); 
 
    $(this).find('.submenu').show(); 
 
});

ul.menu { 
 
    background: #f39494 none repeat scroll 0 0; 
 
    margin: 0 auto; 
 
    padding: 0; 
 
    width: 600px; 
 
} 
 
ul.menu li { 
 
    display: block; 
 
    float: left; 
 
} 
 
ul.menu li a { 
 
    display: block; 
 
    padding: 10px 20px; 
 
} 
 
ul.submenu { 
 
    background: ; 
 
    display: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 120px; 
 
} 
 
.clear { 
 
    clear: both; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <button>Menu</button> 
 
    <ul class="menu"> 
 
    <li> 
 
     <a href="#">Football</a> 
 
    </li> 
 
    <li> 
 
     <a href="#">cricket</a> 
 
     <ul class="submenu"> 
 
     <li> 
 
      <a href="#">Shane</a> 
 
     </li> 
 
     <li> 
 
      <a href="#">Waqar</a> 
 
     </li> 
 
     <li> 
 
      <a href="#">Waseem</a> 
 
     </li> 
 
     <li> 
 
      <a href="#">Akhtar</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    <li> 
 
     <a href="#">Hockey</a> 
 
    </li> 
 
    <li> 
 
     <a href="#">Baseball</a> 
 
     <ul class="submenu"> 
 
     <li> 
 
      <a href="#">Shane</a> 
 
     </li> 
 
     <li> 
 
      <a href="#">Waqar</a> 
 
     </li> 
 
     <li> 
 
      <a href="#">Waseem</a> 
 
      <ul class="submenu"> 
 
      <li> 
 
       <a href="#">Shane</a> 
 
      </li> 
 
      <li> 
 
       <a href="#">Waqar</a> 
 
      </li> 
 
      <li> 
 
       <a href="#">Waseem</a> 
 
      </li> 
 
      <li> 
 
       <a href="#">Akhtar</a> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     <li> 
 
      <a href="#">Akhtar</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    <div class="clear"></div> 
 
    </ul> 
 
</div>

Answer 1

你應該試試這個script

$('.menu li').click(function(){ 
    $('.menu li .submenu').hide(); 
    $('.submenu').show(); 
}); 

我希望它會幫助你。

Answer 2

嘗試這種方式

$(document).ready(function(){ 
    $(".menu li").hover(
    function(){ 
     $(this).children('ul').hide(); 
     $(this).children('ul').slideDown('fast'); 
    }, 
    function() { 
     $('ul', this).slideUp('fast');    
    }); 
}); 

https://jsfiddle.net/7g1hgvzL/