垂直切换菜单第三层父级保持打开.jQuery

Vertical toggle menu 3rd level parent stay opened. jQuery

本文关键字：jQuery 三层 菜单 垂直      更新时间：2023-09-26

我正在制作一个简单的垂直切换菜单，但在点击子级别时留下第一个掉落级别打开时遇到麻烦。为了减少这里的混乱，点击"产品"而不是"网站"，产品会关闭。

但是如果你点击"产品"，而不是"服务"，它就会发挥作用，即在打开一个子目录时关闭其他子目录。

$('.vtoggle li').each(function(el) {
  $(this).find('a').first().attr('href', 'javascript:;').addClass('vtoggler');
});
$('ul.vtoggle > li:has(ul)').addClass("inactive");
$('ul.vtoggle > li:has(ul) ul').css('display', 'none');
$('.vtoggler').click(function() {
  var checkElement = $(this).next();
  $('.vtoggle li').removeClass('active');
  $(this).closest('li').addClass('active').removeClass("inactive");
  if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
    $(this).closest('li').removeClass('active').addClass('inactive');
    checkElement.slideUp('normal');
  }
  if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
    $('ul.vtoggle ul:visible').slideUp('normal');
    checkElement.slideDown('normal');
  }
  if (checkElement.is('ul')) {
    return false;
  } else {
    return true;
  }
});
body {
  background: #fff;
}
.vertical ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: block;
  position: relative;
}
.vertical li {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: block;
  float: none;
  position: relative;
}
.vertical li a {
  display: block;
  height: 45px;
  line-height: 45px;
  padding: 0 10px;
  border: 1px solid rgba(0, 0, 0, 0);
  border-bottom-color: #eee;
}
/* sub menu */
.vertical ul ul {
  display: none;
  position: relative;
  padding: 0 0 0 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="vertical">
  <ul class="vtoggle">
    <li><a href="#">Home</a></li>
    <li><a href="#">Services +</a>
      <ul>
        <li><a href="#">Service 1</a></li>
        <li><a href="#">Service 2</a></li>
        <li><a href="#">Service 3</a></li>
      </ul>
    </li>
    <li><a href="#">Products +</a>
      <ul>
        <li><a href="#">Widgets</a></li>
        <li>
          <a href="#">Sites +</a>
          <ul>
            <li><a href="#">Site 1</a></li>
            <li><a href="#">Site 2</a></li>
          </ul>
        </li>
        <li><a href="#">Gadgets +</a>
          <ul>
            <li><a href="#">Gadget 1</a></li>
            <li><a href="#">Gadget 2</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

解决方案可以是将line换行为:

    var lastUl = $('ul.vtoggle ul:visible:last');
    if (lastUl.find(this).length == 0) {
        $('ul.vtoggle ul:visible').each(function() {
            if ($(this).find(checkElement).length == 0) {
                $(this).slideUp('normal');
            }
        })
    }

代码片段:

$(function () {
  $('.vtoggle li').each(function (el) {
    $(this).find('a').first().attr('href', 'javascript:;').addClass('vtoggler');
  });
  $('ul.vtoggle > li:has(ul)').addClass("inactive");
  $('ul.vtoggle > li:has(ul) ul').css('display', 'none');
  $('.vtoggler').click(function (e) {
    var checkElement = $(this).next();
    $('.vtoggle li').removeClass('active');
    $(this).closest('li').addClass('active').removeClass("inactive");
    if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
      $(this).closest('li').removeClass('active').addClass('inactive');
      checkElement.slideUp('normal');
    }
    if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
      var lastUl = $('ul.vtoggle ul:visible:last');
      if (lastUl.find(this).length == 0) {
        $('ul.vtoggle ul:visible').each(function() {
          if ($(this).find(checkElement).length == 0) {
            $(this).slideUp('normal');
          }
        })
      }
      checkElement.slideDown('normal');
    }
    if (checkElement.is('ul')) {
      return false;
    } else {
      return true;
    }
  });
});
body {
  background: #fff;
}
.vertical ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: block;
  position: relative;
}
.vertical li {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: block;
  float: none;
  position: relative;
}
.vertical li a {
  display: block;
  height: 45px;
  line-height: 45px;
  padding: 0 10px;
  border: 1px solid rgba(0, 0, 0, 0);
  border-bottom-color: #eee;
}
/* sub menu */
.vertical ul ul {
  display: none;
  position: relative;
  padding: 0 0 0 20px;
}
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<nav class="vertical">
    <ul class="vtoggle">
        <li><a href="#">Home</a></li>
        <li><a href="#">Services +</a>
            <ul>
                <li><a href="#">Service 1</a></li>
                <li><a href="#">Service 2</a></li>
                <li><a href="#">Service 3</a></li>
            </ul>
        </li>
        <li><a href="#">Products +</a>
            <ul>
                <li><a href="#">Widgets</a></li>
                <li>
                    <a href="#">Sites +</a>
                    <ul>
                        <li><a href="#">Site 1</a></li>
                        <li><a href="#">Site 2</a></li>
                    </ul>
                </li>
                <li><a href="#">Gadgets +</a>
                    <ul>
                        <li><a href="#">Gadget 1</a></li>
                        <li><a href="#">Gadget 2</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

相关文章：