javascript - 单击其他菜单项时隐藏当前子菜单

Question

我创建了一个标题，其中包含子菜单和所有内容。如果我单击一个菜单，其中有这些菜单的子菜单，它工作正常。但问题是，当我单击另一个菜单时，该菜单具有子菜单，我们单击的前一个菜单并没有被隐藏。两个菜单都显示处于活动和非活动模式。这是我编写的代码：

//Javascript Code:
$('.main-menu li a + ul').prev('a').append('<span class="caret"></span>');
$('.main-menu ul li a').click(function (e) {
  if ($(this).next().hasClass('sub-menu')) {
    e.preventDefault();
    // $('.sub-menu').slideUp(); // <--- This is the culprit
    $('.main-menu ul li a').removeClass('active');
    if ($(this).next('.sub-menu').is(':visible')) {
      $(this).removeClass('active');
      $(this).next('.sub-menu').slideUp();
    } else {
      $(this).addClass('active');
      $(this).next('.sub-menu').slideToggle();
    }
  }
});

/*CSS:*/
.main-menu {
  width: 100%;
  position: relative;
}

.main-menu ul {
  list-style: none;
  font-size: 0;
  line-height: 0;
  text-align: right;
}

.main-menu ul li {
  display: inline-block;
  vertical-align: top;
}

.main-menu ul li a {
  padding: 42px 25px;
  color: #898E94;
  display: block;
  font-size: 16px;
  line-height: 18px;
  font-family: 'Roboto_reg';
}

.side-nav {
  width: 340px;
  right: 0;
  position: absolute;
  background-color: #222222;
  top: 100px;
  z-index: 10;
  display: none;
  height: auto;
}

.side-nav ul li li a {
  padding-left: 70px;
  font-family: 'source_sans_proregular';
}

.side-nav ul li a:hover {
  background-color: #ff3c1f;
  cursor: pointer;
}

.side-nav ul li a {
  color: white;
  font-size: 16px;
  line-height: 24px;
  padding: 15px 50px;
  display: block;
  position: relative;
  border-top: 1px solid transparent;
}

.side-nav.active {
  display: block;
}

.side-nav ul li ul {
  border-bottom: 1px solid rgba(255, 60, 31, 0.3);
  padding-bottom: 30px;
}

.side-nav ul li a.active {
  border-color: rgba(255, 60, 31, 0.3);
}

.sub-menu {
  display: none;
}

.side-nav ul li {
  position: relative;
}

.caret {
  position: absolute;
  width: 10px;
  height: 10px;
  top: 20px;
  right: 65px;
  border: 0;
  border-bottom: 1px solid #fff;
  border-left: 1px solid #fff;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.sub-menu li a {
  padding: 10px 25px !important;
  line-height: 0px !important;
  margin-top: -22px;
}

.sub-menu li a {
  margin-left: -237px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- HTML: -->
<div class="main-menu">
   <ul id="menu-main-menu" class="menu">
      <li  class="menu-item"><a href="http://localhost/barcoun/"><span>Home</span></a></li>
      <li  class="menu-item"><a href="http://localhost/barcoun/about-us/"><span>About Us</span></a></li>
      <li  class="menu-item">
         <a href="#" ><span>Menu3</span><span class="caret"></span></a>
         <ul class="sub-menu">
            <li  class="menu-item"><a href="http://localhost/bar/sumenu1/" ><span>submenu1</span></a></li>
            <li  class="menu-item"><a href="http://localhost/bar/submenu2"><span>submenu2</span></a></li>
            <li  class="menu-item"><a href="http://localhost/bar/sumenu5/" ><span>submenu5</span></a></li>
            <li  class="menu-item"><a href="http://localhost/bar/sumenu6/" ><span >submenu6</span></a></li>
            <li  class="menu-item"><a href="http://localhost/bar/sumenu7/" ><span>submenu7</span></a></li>
         </ul>
      </li>
      <li class="menu-item">
         <a href="#"><span>Other Links</span><span class="caret"></span></a>
         <ul class="sub-menu">
            <li  class="menu-item"><a href="http://localhost/bar/sumenu8/" ><span>Submenu8</span></a></li>
            <li  class="menu-item"><a href="http://localhost/bar/sumenu9/" ><span>Submenu9</span></a></li>
            <li  class="menu-item"><a href="http://localhost/bar/sumenu10/" ><span>Submenu10</span></a></li>
            <li  class="menu-item"><a href="http://localhost/bar/sumenu11/" ><span>Submenu11</span></a></li>
         </ul>
      </li>
      <li  class="menu-item"><a href="http://localhost/barcoun/contact-us/"><span>Contact Us</span></a></li>
   </ul>
</div>

它也没有显示箭头图标，它在移动设备中运行良好，但在台式机中出现问题。

标签： javascriptjqueryhtmlcss

Answer 1

我已经编辑了您的 JavaScript 代码以允许切换和隐藏其他活动的子菜单。

编辑：编辑 css 以修复布局。

$('.main-menu ul li a').click(function (e) {
  // remove the active class with every click
  var same = $(this).hasClass('active');
  var siblings = $(this).parent('.menu-item').parent().children();
  siblings.find('a.active + .sub-menu').slideUp();
  siblings.find('a').removeClass('active'); 
  
  if ($(this).next().hasClass('sub-menu') && !same) {
    e.preventDefault();
    $(this).addClass('active');
    $(this).next('.sub-menu').slideDown();
  }
});

/*CSS:*/
.main-menu {
  width: 100%;
  position: relative;
}

.menu {
  list-style-type: none;
}

.menu-item {
  position: relative;
  display:inline-block;
  padding-right: 20px;
}

.sub-menu {
  padding-left: 0;
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
}

.sub-menu.level-2 {
  left: 100%;
}

.caret {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 7px 7px 0 7px;
  border-color: #000 transparent transparent transparent;
}

.menu-item a.active .caret {
  border-width: 0 7px 7px 7px;
  border-color: transparent transparent #000 transparent;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- HTML: -->
<div class="main-menu">
   <ul id="menu-main-menu" class="menu">
      <li  class="menu-item"><a href="http://localhost/barcoun/"><span>Home</span></a></li>
      <li  class="menu-item"><a href="http://localhost/barcoun/about-us/"><span>About Us</span></a></li>
      <li  class="menu-item">
         <a href="#" ><span>Menu3</span><span class="caret"></span></a>
         <ul class="sub-menu">
            <li  class="menu-item"><a href="http://localhost/bar/sumenu1/" ><span>submenu1</span></a></li>
            <li  class="menu-item"><a href="http://localhost/bar/submenu2"><span>submenu2</span></a></li>
            <li  class="menu-item"><a href="http://localhost/bar/sumenu5/" ><span>submenu5</span></a></li>
            <li  class="menu-item"><a href="http://localhost/bar/sumenu6/" ><span >submenu6</span></a></li>
            <li  class="menu-item"><a href="http://localhost/bar/sumenu7/" ><span>submenu7</span></a></li>
         </ul>
      </li>
      <li class="menu-item">
         <a href="#"><span>Other Links</span><span class="caret"></span></a>
         <ul class="sub-menu">
            <li  class="menu-item"><a href="#">
              <span>Other Links</span><span class="caret"></span></a>
               <ul class="sub-menu level-2">
                 <li  class="menu-item"><a href="http://localhost/bar/sumenu9/" ><span>SubSubMenu</span></a></li>
               </ul>
             </li>
            <li  class="menu-item"><a href="http://localhost/bar/sumenu9/" ><span>Submenu9</span></a></li>
            <li  class="menu-item"><a href="http://localhost/bar/sumenu10/" ><span>Submenu10</span></a></li>
            <li  class="menu-item"><a href="http://localhost/bar/sumenu11/" ><span>Submenu11</span></a></li>
         </ul>
      </li>
      <li  class="menu-item"><a href="http://localhost/barcoun/contact-us/"><span>Contact Us</span></a></li>
   </ul>
</div>