javascript - 使用 jQuery 的 .show() 显示内容时遇到问题

Question

我在“顶级”上有一个点击处理程序 <li>就是说我要隐藏<li>下面的所有内容s 然后显示特定<li> 下方的内容被点击了。

隐藏有效，但显示无效。

$('.menu li').click(function() {
  $('.submenu').hide();
  var myclass = $('submenu');
  $(this).show($submenu)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.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>
        </li>
        <li><a href="#">Akhtar</a>
        </li>
      </ul>
    </li>
    <div class="clear"></div>
  </ul>
</div>

Answer 1

试试这个。

用CSS隐藏子菜单。
然后，当您单击列表项时，它会切换子菜单。

如果您只想一次显示一个子菜单，请取消注释 js 中的行。

$('.menu li').has('.submenu').click(function(e) {
  e.preventDefault();
  $(this).find('.submenu').slideToggle();
});

.submenu {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.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></li>
        <li><a href="#">Akhtar</a></li>
      </ul>
    </li>
    <div class="clear"></div>
  </ul>
</div>