Question

我是网站中的多级下拉菜单，当我单击主菜单时它显示子菜单，但是当我单击该子菜单时它向上滑动菜单而不显示菜单。那

$('.main-menu ul li a').click(function(e) {
  if ($(this).next().hasClass('sub-menu')) {
    e.preventDefault();
    $('.sub-menu').slideUp();
    $('.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();
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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="http://localhost/barcoun/contact-us/"><span>Contact Us</span></a>
    </li>
    <li class="menu-item">
      <a href="#" class="menu-image-title-after"><span>Enrolments</span></a>
      <ul class="sub-menu" style="display: none">
        <li class="menu-item">
          <a href="#"><span>Enrolment</span></a>
          <ul class="sub-menu" style="display: none">
            <li class="menu-item">
              <a href="http://localhost/barcoun/enrollment-details-by-bar-association/"><span>Enrolment Details</span></a>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

Answer 1

我不确定这是否是您要寻找的行为，但是如果您删除了调用slideUp的第一行代码，它似乎就可以正常工作。

$('.main-menu ul li a').click(function(e) {
    if($(this).next().hasClass('sub-menu')){
        e.preventDefault();
        // Remove this line:
        //$('.sub-menu').slideUp();
        $('.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();
        }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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="http://localhost/barcoun/contact-us/"><span>Contact Us</span></a></li>
    <li  class="menu-item"><a href="#" class="menu-image-title-after"><span>Enrolments</span></a>
        <ul class="sub-menu">
            <li  class="menu-item"><a href="#"><span>Enrolment</span></a>
                <ul class="sub-menu">
                    <li  class="menu-item"><a href="http://localhost/barcoun/enrollment-details-by-bar-association/" ><span>Enrolment Details</span></a></li>
                </ul>
            </li>
        </ul>
    </li>       
</ul>
</div>

Answer 2

只需摆脱这一行：$('.sub-menu').slideUp();

$('.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();
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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="http://localhost/barcoun/contact-us/"><span>Contact Us</span></a>
    </li>
    <li class="menu-item">
      <a href="#" class="menu-image-title-after"><span>Enrolments</span></a>
      <ul class="sub-menu" style="display: none">
        <li class="menu-item">
          <a href="#"><span>Enrolment</span></a>
          <ul class="sub-menu" style="display: none">
            <li class="menu-item">
              <a href="http://localhost/barcoun/enrollment-details-by-bar-association/"><span>Enrolment Details I</span></a>
            </li>
            <li class="menu-item">
              <a href="http://localhost/barcoun/enrollment-details-by-bar-association/"><span>Enrolment Details II</span></a>
            </li>
            <li class="menu-item">
              <a href="http://localhost/barcoun/enrollment-details-by-bar-association/"><span>Enrolment Details III</span></a>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

单击多级下拉菜单不显示菜单

2 个答案: