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

Trouble showing content with jQuery's .show()

本文关键字：遇到 问题 显示 jQuery show 使用      更新时间：2023-09-26

我在"顶级"<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>

试试这个。

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

你应该试试这个。

<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>
     <script type="text/javascript">
       $('.submenu').hide();
        $(document).on("click",".menu li",function(){  
             $(this).find('.submenu').slideToggle();
        });
     
     </script>

您正在使用jQuery，并且有用于显示/隐藏切换的toggle（）函数，并像这样使用

    $('.submenu').toggle();

我修复了你不起作用的脚本。

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

工作小提琴

相关文章：