当我点击.menu li所有子菜单同时打开？

Question

请帮助我，我遇到了大麻烦并寻找完美的解决方案。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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/