分享
三行代码  ›  专栏  ›  技术社区  ›  Matthew Pichola

导航切换类只打开单击的项而不是全部

  •  0
  • Matthew Pichola  · 技术社区  · 1 周前

    我有一个带有子导航的导航,默认情况下是隐藏的,我想在单击时显示每个项目的子导航,但当前单击时它会同时显示所有项目的子导航,因为单击正在切换类。如何仅切换已单击项的子AV?

    <nav class="st-menu" id="menu-4a">
        <ul>
            <li>
                <a href="#">Guidance Manual</a>
            </li>
            <li>
                <a href="#">Resource Directory</a><div class="toggle-arrow"><img src="/assets/images/chevron-up-solid.svg"/></div>
                <ul class="reg-subnav">
                    <li><a href="#">Stormwater Plan Review Resources</a></li>
                    <li><a href="#">Pilot Projects</a></li>
                    <li><a href="#">Proprietary Products</a></li>
                    <li><a href="#">Additional Resources</a></li>
                </ul>
            </li>
            <li>
                <a href="#">Stormwater 101</a><div class="toggle-arrow"><img src="/assets/images/chevron-up-solid.svg"/></div>
                <ul class="reg-subnav">
                    <li><a href="#">Regulations</a></li>
                    <li><a href="#">Stormwater Management</a></li>
                    <li><a href="#">Stormwater Billing & Retrofits</a></li>
                    <li><a href="#">Green City, Clean Waters</a></li>
                </ul>
            </li>
            <li>
                <a href="#">Contact Us</a><div class="toggle-arrow"><img src="/assets/images/chevron-up-solid.svg"/></div>
                <ul class="reg-subnav">
                    <li><a href="#">About Us</a></li>
                    <li><a href="#">Development Review Contacts</a></li>
                </ul>
            </li>
        </ul>
    </nav>
    

    jQuery公司

    $(".toggle-arrow").click(function(){
        $(".reg-subnav").toggleClass('open-sub');
    });
    
    1 回复  |  直到 1 周前
        1
  •  1
  •   Taplar    1 周前
    $(".toggle-arrow").click(function(){
        $(this).closest('li').find(".reg-subnav").toggleClass('open-sub');
    });
    

    箭头和要切换的元素都属于 <li>