Question

我想以“切换”方式显示或隐藏移动菜单中的选定项目。

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

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

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

在单击菜单上，我要显示除这些元素中的所有这些元素 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>

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

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

1 个答案: