Question

我想在父LI点击打开子UL。问题是我有父LI上的子页面的链接，需要禁用它们，因此它们不会重定向到子页面，而是扩展子UL。如果没有孩子UL，父母LI上的链接正常工作。

代码bellow适用于禁用默认URL并扩展子UL，但它也禁用子UL LI URL，但不应该。

所以，当我点击“没有孩子”时，它应该把我送到雅虎，但是当我点击是的孩子它应该扩展孩子UL.sub-nav和链接.sub-nav li应该正常工作。

希望它足够清楚

这是HTML

<nav>
    <ul>
        <li><a href="http://www.yahoo.com">No child</a></li>
        <li><a href="http://www.altavista.com">Yes child</a>
            <ul class="sub-nav">
                <li><a href="http://www.bing.com">submenu1</a></li>
                <li><a href="http://www.google.com">submenu2</a></li>
            </ul>
        </li>
        <li><a href="http://www.google.com">No child</a></li>
    </ul>
</nav>

和JS

$("nav ul li ul").css("display", "none");
$("nav li a").click(function (e) {
    e.preventDefault();
    $(this).next('ul').slideToggle();
});

Fiddle here

Answer 1

您只能定位具有ul的锚元素才能显示

$("nav li:has(ul) > a").click(function(e) {
  e.preventDefault();
  $(this).next('ul').slideToggle();
});

nav ul ul {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <ul>
    <li><a href="http://www.yahoo.com">No child</a>
    </li>
    <li><a href="http://www.altavista.com">Yes child</a>

      <ul class="sub-nav">
        <li><a href="http://www.bing.com">submenu1</a>
        </li>
        <li><a href="http://www.google.com">submenu2</a>
        </li>
      </ul>
    </li>
    <li><a href="http://www.google.com">No child</a>
    </li>
  </ul>
</nav>

菜单：在父LI上展开子UL单击并禁用链接

1 个答案: