Question

我有一个使用jQuery UI手风琴的导航菜单。我有一个脚本，表示将类样式应用于li a。

            $(".secondaryMenu a").each(function() {   
                if (this.href == window.location.href) {
                        $(this).addClass("active");
                    }
                    });

我想说任何已应用此类的手风琴面板，然后内容面板在该页面上保持活动状态，这样用户点击链接并转到另一个页面，面板将保持活动状态，导航可见。因为我不需要将页面放在不同的目录中，所以我希望我可以只使用活动类，因为如果用户点击它，那么它就是页面和部分，无论如何它们都将被用于。

标记：

            <nav>
            <ul id="accordion3">
             <li><a href="somewhere.php">Link</a></li>
                <li><a href="somewhere.php">Link</a></li>
                <li><a href="somewhere.php">Link</a></li>
                <li class="accHeader"><a href="somewhere.php">Link</a></li>
             <ul>
                 <li><a href="somewhere.php">Link</a></li>
                  <li><a href="somewhere.php">Link</a></li>
                </ul>
                <li><a href="somewhere.php">Link</a></li>
                <li class="accHeader"><a href="somewhere.php">Link</a></li>
                <ul>
                 <li><a href="somewhere.php">Link</a></li>
                 <li><a href="somewhere.php">Link</a></li>
                 </ul>
                <li><a href="somewhere.php">Link</a></li>
             <li class="accHeader"><a href="somewhere.php">Link/a></li>
                 <ul>
                 <li><a href="somewhere.php">Link</a></li>
                 <li><a href="somewhere.php">Link</a></li>
                </ul>
                <li><a href="somewhere.php">Link</a></li>
            </ul>
            </nav>

jQuery的：

        $(function() {
                  $( "#accordion3" ).accordion({
                    navigation: true,
                    collapsible: true,
                    heightStyle: "content",
                    header:'.accHeader',
                    icons:  {header: 'acc-plus', activeHeader: 'acc-minus', },
                    active: $("#accordion3 .accHeader ul li a").hasClass('active')
                                });
                                      $("#accordion3 li a").click(function() {
                    window.location = $(this).attr('href');
               return false;

              });

我的问题是，如果标题下的任何链接都应用了活动类，如何才能使内容面板处于活动状态？

我可以考虑如何去做，但不能真正实现它。如果为true，则查找应用于标题下链接的活动类，然后保持活动内容。如果false，则默认值为false。

Answer 1

只需使用jQuery的父选择器来查找父级并应用该类。

$(".secondaryMenu a").each(function() {   
    if (this.href == window.location.href) {
        $(this).addClass("active").parents(".accHeader").addClass("active");
    }
});

我不确定我是否正确理解了您的问题，但如果我这样做，那么这应该有效。

根据导航决策保持jQuery UI Accordion内容处于活动状态

1 个答案: