如何实现点击页面任意区域关闭侧边栏导航？

阿华AIGC实验室

2026-5-28

解决点击页面任意区域关闭侧边栏的问题

Hey there! Let's get that "click anywhere to close the sidebar" feature working properly. First, let's address the issues in your current code:

You've got duplicate nested jQuery(document).ready calls and repeated event bindings, which can cause unexpected behavior.
The body click handler uses a close class, but your existing logic relies on the open class to toggle the sidebar—we should keep this consistent.
Right now, clicking the sidebar itself or the menu trigger would also trigger the body's close action, which isn't what we want.

Here's the revised, clean code to make this work as expected:

修正后的JS代码

jQuery(document).ready(function() {
  // 初始化触发器类（移除重复的添加操作）
  $('.menu-item').addClass('menu-trigger');

  // 菜单触发器点击逻辑：切换侧边栏状态
  $('#menu-trigger').click(function(e) {
    // 阻止事件冒泡，避免触发body的点击事件
    e.stopPropagation();
    $(this).toggleClass('clicked');
    $('.container').toggleClass('push');
    $('.menu-type').toggleClass('open');
  });

  // 点击页面其他区域关闭侧边栏
  $('body').click(function() {
    // 只有当侧边栏处于打开状态时才执行关闭
    if ($('.menu-type').hasClass('open')) {
      $('#menu-trigger').removeClass('clicked');
      $('.container').removeClass('push');
      $('.menu-type').removeClass('open');
    }
  });

  // 点击侧边栏内部时，阻止事件冒泡，避免关闭
  $('.menu-type').click(function(e) {
    e.stopPropagation();
  });
});

对应的HTML（保持原有结构，仅移除默认的`open`类）

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu-trigger" class="menu-trigger">
 <div></div>
 <div></div>
 <div></div>
</div>
<div class="menu-tint menu-trigger menu-type"></div>
<div class="menu menu-type">
 <div class="table">
 <div class="cell">
 <ul class="cd-navigation">
 <li class="current"><a href="#index-link">MENU</a></li>
 <li><a class="a-white" href="index.php"> Home </a></li>
 <li><a href="#our_journey" class="scroll-down smooth-scroll">Our Journey</a></li>
 <li class="item-has-children">
 <a href="#0">About Us</a>
 <ul class="sub-menu">
 <li><a href="ethos.php">Company Ethos</a></li>
 <li><a href="joint_venture.php">Joint Ventures</a></li>
 </ul>
 </li>
 <li class="item-has-children">
 <a href="#0">3 PL Solutions</a>
 <ul class="sub-menu" style="">
 <li><a href="distribution.php"> Distribution Centers</a></li>
 <li><a href="invetory.php">Inventory Management </a></li>
 <li><a href="threepl.php">Customs Clearance </a></li>
 <li><a href="transportation.php">Transportation – MTCL</a></li>
 <li><a href="cold_chain.php">Cold Chain Management</a></li>
 <li><a href="it_management.php">IT- Multiline Business Solution </a></li>
 <li><a href="ar_management.php">AR Management</a></li>
 </ul>
 </li>
 <li><a class="a-white" href="groupcompanies.php">Group Companies</a></li>
 <li><a href="#our_journey1" class="scroll-down smooth-scroll">Case Studies</a></li>
 <li><a href="#our_journey3" class="scroll-down smooth-scroll">Careers</a></li>
 <li><a href="#our_jurneyvalue" class="scroll-down smooth-scroll">Value Added Services</a></li>
 <li><a href="#our_journey4" class="scroll-down smooth-scroll">What Makes Us Different</a></li>
 <li><a href="#our_journey5" class="scroll-down smooth-scroll">Locations</a></li>
 <li><a href="gallery.php">Gallery</a></li>
 <li><a class="a-white" href="contact.php">Contact Us</a></li>
 </ul>
 </div>
 </div>
</div>

补充CSS（确保侧边栏默认隐藏，`open`类控制显示）

/* 默认隐藏侧边栏 */
.menu-type {
  display: none;
  /* 保留你原有的侧边栏定位、背景等样式 */
}

/* 打开状态显示侧边栏 */
.menu-type.open {
  display: block;
}

/* 保留你原有的#menu-trigger样式 */
#menu-trigger {
 position: fixed;
 top: 20px;
 right: 20px;
 z-index: 99;
 -webkit-transition: all 0.5s ease;
 transition: all 0.5s ease;
 -webkit-transform: scale(0.85);
 transform: scale(0.85);
 border-color: #2957a4;
 padding: 10px;
}
#menu-trigger div {
 position: relative;
 display: block;
 height: 5px;
 margin-bottom: 7px;
 width: 40px;
 background: #fff;
 -webkit-transition: all 0.5s ease;
 transition: all 0.5s ease;
 -webkit-box-shadow: 1px 1px 2px #222;
 box-shadow: 1px 1px 2px #222;
}
#menu-trigger:hover {
 cursor: pointer;
 background: #2957a4;
 color: #fff;
 border-color: #2957a4;
 padding: 10px;
}
#menu-trigger:hover div:nth-child(odd) {
 width: 35px;
}
#menu-trigger:hover div:nth-child(even) {
 width: 25px;
}
#menu-trigger.clicked div:nth-child(even) {
 opacity: 0;
}
#menu-trigger.clicked div:nth-child(1) {
 -webkit-transform: rotate(45deg);
 transform: rotate(45deg);
 top: 12px;
}
#menu-trigger.clicked div:nth-child(3) {
 -webkit-transform: rotate(-45deg);
 transform: rotate(-45deg);
}