显示jQuery内容的问题.show（）

我在“顶级”<li>上有一个点击处理程序，我想隐藏<li>以下的所有内容，然后在被点击的特定<li>以下显示内容。显示jQuery内容的问题.show（）

隐藏的作品，但显示没有。

$('.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>

来源

2016-01-20 Hafiz

什么都要你预期的输出？ –

问题的背景需要给你一个解决方案。请举例说明你想要达到的目标。 – Dandy

解释代码试图做什么以及它做了什么。此外，使代码成为可测试片段（使用编辑菜单中的[<>]框）。 –

试试这个。

它隐藏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>

来源

2016-01-20 07:44:05 LinkinTED

你应该试试这个。

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

来源

2016-01-20 07:46:24

非常感谢你们我帮助你们解决了我的问题解决方案 – Hafiz

@Hafiz欢迎。接受答案，如果它可以帮助你做信用。 –

您正在使用jQuery和有toggle()功能显示/隐藏切换，并使用类似这样的

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

，我定你的脚本不起作用。

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

Working fiddle

来源

2016-01-20 07:54:18 Mystika

显示jQuery内容的问题.show（）

回答

相关问题