[英]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.