如何完全禁用var菜单项，即使它们不可见，它们仍然是可点击的

Question

HTML

如何完全禁用var菜单项，即使它们不可见，它们仍然是可点击的

    <div class="nav-bar">
    <div class="menu-container">
        <div class="menu-logo"><img height="50px" src="" width="80px"></div>
        <ul>
            <li class="menu-store">
                <div class="button_container" id="toggle">
                    <span class="top"></span> <span class="bottom"></span>
                </div><span class="shop-text">Shop</span>
            </li>
            <li class="menu-store" id="cart-toggle"><i aria-hidden="true" class="fa"><a class="cart-icon button" href="#"></a></i></li>
            <li class="menu-account" id="account-toggle"><i aria-hidden="true" class="fa"><a class="account-icon button" href="#"></a></i></li>
            <li class="menu-search"><i aria-hidden="true" class="fa"><a class="magnify-icon" href="#"></a></i></li>
        </ul><!-- Search -->
        <div class="menu-search-container">
            <div class="menu-search-input">
                <form action="">
                    <a class="magnify-icon" href="#"></a> <input aria-label="Search" autocomplete="off" class="menu-search-input" placeholder="Search stephenjosephinc.com" spellcheck="false" type="text">
                </form>
            </div><a class="closing-time-icon menu-search-close" href="#"></a>
            <div class="search-sub-menu">
                <h3>Quick Links</h3>
            </div>
        </div>
    </div>
</div>

<div class="overlay" id="cart-overlay">
</div>

Javascript如何完全禁用var菜单项，即使它们不可见，它们仍然是可点击的

(function() {

  'use strict';
  var $menu = $(' .menu-search, .menu-account');
  var $fadeScreen = $('.overlay');

  $('#cart-toggle').on('click', function(e) {


    $fadeScreen.toggleClass('visible');
    $menu.removeClass('is-closed');
    $menu.toggleClass('hidden');


    e.preventDefault();
  });

  $('#cart-toggle').on('click', function(e) {
    $menu.toggleClass('is-closed');
    e.preventDefault();
  });

}());

CSS

.nav-bar {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  height: 50px;
  background: rgba(255, 255, 255, 1);
  font-size: 18px;
  z-index: 2;
}

.menu-container {
  position: relative;
  margin: 0 auto;
  max-width: 100%;
  padding: 0;
    background-color: #fff;
    height: 50px;
    border-bottom: 1px solid #E3E3E3;

}
.menu-container ul {
  list-style: none;
}
.menu-container ul li:first-child {
    float: left;

}
.menu-container ul li {
  display: inline-block;
  text-align: center;
  width: auto;
    float: right;
}
.menu-container ul li:last-child {
  margin-right: 0;
}
.menu-container ul li a {
  display: inline-block;
  font-family: -apple-system, BlinkMacSystemFont,  "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",  "Fira Sans", "Droid Sans", "Helvetica Neue",  sans-serif;
  text-decoration: none;
  color: #fff;
  font-weight: 100;
  font-size: 16px;
    height: 50px;
    width: 50px;
  float: left;
}
.menu-container ul li a:hover {
  color: #969696;
}
.menu-container.menu-apple {
  background-repeat: no-repeat;
  width: 20px;
}

.menu-cart-container {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 2;
}

.menu-search-container {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 2;
}
.menu-search-container input {
  background-color: transparent;
  border: none;
  width: 80%;
  font-size: 16px;
    height:50px;
  outline: none;
  color: #000;
     z-index: 2;
    background-color: #fff;
}
.menu-search-container a {
  color: #fff;
}
.menu-search-container a:first-child {
  display: block;
  float: left;
  padding-right: 10px;
}
.menu-search-container.active {
  display: block;
}

.menu-search-close {
  position: absolute;
  right: 0;
  top: 0;
}

.search-sub-menu {
  background: #fff;
  width: 100%;
  color: #999;
  font-weight: 100;
  padding: 24px 0 15px;
  z-index: 1;
}
.search-sub-menu h3 {
  font-size: 12px;
  font-weight: 100;
  margin-top: 0;
  padding-left: 28px;
}
.search-sub-menu ul {
  margin: 0;
  padding: 0;
  width: 100%;
}
.search-sub-menu ul li {
  display: block;
  text-align: left;
  padding-bottom: 10px;
  margin: 0;
  text-indent: 50px;
}
.search-sub-menu ul li a {
  font-size: 14px;
  color: #999;
  width: 100%;
  padding-top: 5px;
  padding-bottom: 5px;
}
.search-sub-menu ul li a:hover {
  background-color: #f2f2f2;
  color: #3392de;
}
.search-sub-menu ul li a:first-child {
  float: none;
  padding-right: 0;
}

如何完全禁用var菜单项，即使它们不可见，它们仍然是可点击的