简体   繁体   English

jQuery显示/隐藏切换Div所选项目

[英]Jquery Show / Hide Toggle Div Selected Items

I would like to show or hide selected items in mobile menu as Toggle. 我想以“切换”显示或隐藏移动菜单中的选定项目。

For example if i click menu toggle. 例如,如果我单击菜单切换。 i want to show all the items in Div class sidebar but want to hide content in its child div of it has . 我想显示Div类侧边栏中的所有项目,但要隐藏其子div中的内容。

My menu html for toggle link icon: 我的菜单HTML(用于切换链接图标):

<a id="pull" class="toggle" style="cursor:pointer">Menu</a>

On click menu i want to show all these elements except elements in class="sticky" 在点击菜单上,我要显示除class =“ sticky”中的元素以外的所有这些元素

<div class="sidebar">
            <ul class="leftnav">
                  <li>» <a href="#">January</a></li>
                  <li>» <a href="#">February</a></li>
                  <li>» <a href="#">March</a></li>    
                  <li>» <a href="#">April</a></li>
                  <li>» <a href="#">May</a></li>
                  <li>» <a href="#">June</a></li>    
                  <li>» <a href="#">July</a></li>
                  <li>» <a href="#">August</a></li>
                  <li>» <a href="#">September</a></li>
                  <li>» <a href="#">October</a></li>
                  <li>» <a href="#">November</a></li>
                  <li>» <a href="#">December</a></li>
            </ul>
      <div class="sticky">
I dont want to show this item in toggle menu.
  </div>
  </div>

 $(function() { let $sidebar = $('.sidebar'), $btn = $('.toggle'); $btn.click(() => { $sidebar.toggle(); }) }) 
 .sidebar{ display: none; } .sticky{ display: none; } 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <a id="pull" class="toggle" style="cursor:pointer">Menu</a> <div class="sidebar"> <ul class="leftnav"> <li>» <a href="#">January</a></li> <li>» <a href="#">February</a></li> <li>» <a href="#">March</a></li> <li>» <a href="#">April</a></li> <li>» <a href="#">May</a></li> <li>» <a href="#">June</a></li> <li>» <a href="#">July</a></li> <li>» <a href="#">August</a></li> <li>» <a href="#">September</a></li> <li>» <a href="#">October</a></li> <li>» <a href="#">November</a></li> <li>» <a href="#">December</a></li> </ul> <div class="sticky"> I dont want to show this item in toggle menu. </div> </div> 

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM