Jquery Show / Hide Toggle Div Selected Items答案

【问题标题】：Jquery Show / Hide Toggle Div Selected ItemsJquery Show / Hide Toggle Div Selected Items
【发布时间】：2019-05-13 16:01:05
【问题描述】：

我想将移动菜单中的选定项目显示或隐藏为切换。

例如，如果我单击菜单切换。我想显示 Div 类侧边栏中的所有项目，但想隐藏它的子 div 中的内容。

用于切换链接图标的菜单 html：

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

在点击菜单上，我想显示所有这些元素，除了 class="粘性"

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

【问题讨论】：

您在这样做时遇到了什么问题？
设置类“粘性”显示：无
我可以使用 jquery 显示类“侧边栏”中的所有项目，但是如何从切换列表中排除子 div 粘性？？
我想在移动设备上默认显示 class="sticky" 只是想从切换菜单中隐藏。但我想默认隐藏“侧边栏”类，但想在单击切换菜单时显示
我想显示类“侧边栏”中的每个元素，除了粘性类，因为它应该默认显示。

标签： javascript jquery html css toggle

【解决方案1】：

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

【讨论】：