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

Question

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

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

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

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

但它不起作用。 我是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 hide命令中忽略.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>