javascript - 使用具有特定类名的jquery在上下文中查找父元素

当它具有特定的类名称时，我正在尝试查找链接的父元素。

我有以下列表用作导航菜单，加载页面时，我在li（has-subitem）内部的ul（subitem）已关闭（display：hidden）。现在，我想根据我所在的页面打开其中一个。

为此，我正在尝试这样做。

每当我在“ subitem li”中具有类名称为“ current”的链接时，我都希望保持“ has-subitem”打开而不是关闭它。 fiddle在这里

但它不起作用。我是JS新手:(

<ul class="navi-list">
    <li class="no-subitem"> <a class="current">Overview</a>
 <span class="navi-current"></span>

    </li>
    <li><a class="has-subitem"><i class="fa fa-caret-right fw"> </i> Policies & Procedures </a>

        <ul class="submenu">
            <!-- whenever I have this "current" i would like to find the li above with class "has-subitem" containing this link---->
            <li><a class="current" href="#"> Documents & Resources </a>
            </li>
            <li><a href="#"> Upcoming Events </a>
            </li>
            <li><a href="#"> News </a>
            </li>
            <li><a href="#"> Announcements </a>
            </li>
        </ul>
    </li>
    <li><a class="has-subitem"><i class="fa fa-caret-right fw"> </i> Feeds & Discussions </a>

        <ul class="submenu">
            <li><a href="#"> Blog & Podcasts </a>
            </li>
            <li><a href="#"> Photos & Videos </a>
            </li>
        </ul>
    </li>
    <li><a class="has-subitem"><i class="fa fa-caret-right fw"> </i> About Us </a>

        <ul class="submenu">
            <li><a href="#"> FAQs </a>
            </li>
            <li><a href="#"> Contact Us </a>
            </li>
        </ul>
    </li>
</ul>

最佳答案

您可以忽略.has-subitem.current hide命令中的submenu元素，例如

$(".has-subitem:not(.current)").next(".submenu").hide();
$('.navi-list a.current').closest('li:has(> a.has-subitem)').children('.submenu').show();

$(document).on("click", ".has-subitem", function() {
  $(this).next(".submenu").slideToggle();
  $(this).find('i').toggleClass("fa-caret-right fa-caret-down");
});

<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="navi-list">
  <li class="no-subitem">
    <a class="">Overview</a>
    <span class="navi-current"></span>
  </li>
  <li>
    <a class="has-subitem"><i class="fa fa-caret-right fw"> </i> Policies & Procedures </a>
    <ul class="submenu">
      <li><a href="#" class="current"> Documents & Resources </a></li>
      <li><a href="#"> Upcoming Events </a></li>
      <li><a href="#"> News </a></li>
      <li><a href="#"> Announcements </a></li>
    </ul>
  </li>
  <li>
    <a class="has-subitem"><i class="fa fa-caret-right fw"> </i> Feeds & Discussions </a>
    <ul class="submenu">
      <li><a href="#"> Blog & Podcasts </a></li>
      <li><a href="#"> Photos & Videos </a></li>
    </ul>
  </li>
  <li>
    <a class="has-subitem"><i class="fa fa-caret-right fw"> </i> About Us </a>
    <ul class="submenu">
      <li><a href="#"> FAQs </a></li>
      <li><a href="#"> Contact Us </a></li>
    </ul>
  </li>
</ul>

关于javascript - 使用具有特定类名的jquery在上下文中查找父元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27538544/