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

Question

当链接具有特定的类名时，我试图找到链接的父元素。

我有下面的列表用作导航菜单，当我加载页面时，我在 li(has-subitem) closed(display:hidden) 中有 ul(subitem)。现在我想根据我所在的页面打开其中一个。

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

每当我在“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>

Answer 1

你可以忽略submenu隐藏命令中的.has-subitem.current元素

$(".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>