0

我有一个使用 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;

              });

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

我可以考虑如何去做，但并没有真正做到。如果为真，则查找应用于标题下链接的活动类，然后保持内容活动。如果为假，则默认应为活动假。

4

1 回答 1

0

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

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

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

于 2013-04-03T21:07:35.457 回答