0

我有一个如下的 HTML 结构：

<ul id="mainMenu">
    <li class="itm_1">
        Text...
    </li>
    <li class="itm_2">
        Text...
        <ul>
            <li class="itm_3">
                Text...
                <ul>
                    <li class="itm_4">
                        Text...
                    </li>
                    <li class="itm_5">
                        Text...
                    </li>
                </ul>
            </li>
            <li class="itm_6">
                Text...
            </li>
        </ul>
    </li>
</ul>

我喜欢做的是向活动元素添加一个类，然后在同一路径中的任何其他元素中添加另一个类，如下例所示：

<ul id="mainMenu">
    <li class="itm_1">
        Text...
    </li>
    <li class="itm_2 ANCESTOR_ACTIVE">
        Text...
        <ul>
            <li class="itm_3 ANCESTOR_ACTIVE">
                Text...
                <ul>
                    <li class="itm_4">
                        Text...
                    </li>
                    <li class="itm_5 ACTIVE">
                        Text...
                    </li>
                </ul>
            </li>
            <li class="itm_6">
                Text...
            </li>
        </ul>
    </li>
</ul>

将被视为活动的元素我可以找到它并添加活动的类，但我找不到在同一路径中活动元素上方的元素中添加祖先活动类的方法。

现在在我的脚本中，我有以下代码：

<?php
    $current_page = $page_id;    // Lets say is 5
?>
<script type="text/javascript">
    var cp = {
        p : <?php echo $current_page; ?>
    };

    jQuery(document).ready(
        function($)
        {
            $('.itm_' + cp.p).addClass('active');
        }
    );
</script>

注意：嵌套数组并不总是具有相同的深度。在某些情况下，还有其他更多的嵌套列表，而在其他一些情况下，没有子列表我如何爬到顶部元素#mainMenu 并使用 jQuery 将类“ancestor_active”添加到同一路径中的每个 li 元素？

4

2 回答 2

3

用于parents()查找所有匹配的树

$('#mainMenu li').click(function(){
  $('#mainMenu li.active').removeClass('active');
   $(this).addClass('active').parents('li').addClass('active');
});

API 参考http://api.jquery.com/parents/

于 2013-02-02T07:58:35.987 回答
1

你可以使用父函数，我猜

编辑一个小例子

<script type="text/javascript">
    var cp = {
        p : 4
    };
    jQuery(document).ready(
        function($) {
            var c = $('.itm_' + cp.p)
        c.addClass('active')
        set_ancestor_active(c.parent())
        }
    );
function set_ancestor_active(c) {
   while (c.is('li') || c.is('ul')) {
    if (c.is('li'))
         c.addClass('ancestor_active')
    c = c.parent()
   }
}
</script>
于 2013-02-02T07:46:45.843 回答