Question

<li class="page_item "><a href="javascript:">A</a>
<ul class="children">
    <li class="page_item"><a href="javascript:">1</a></li>
    <li class="page_item"><a href="javascript:">2</a></li>
</ul>
</li>
<li class="page_item "><a href="javascript:">B</a>
<ul class="children">
    <li class="page_item"><a href="javascript:">1</a></li>
    <li class="page_item"><a href="javascript:">2</a></li>
    <li class="page_item"><a href="javascript:">3</a></li>
    <li class="page_item"><a href="javascript:">4</a></li>
</ul>
</li>

$('.children a').click(function(event){ 
    event.stopPropagation();
        $('ul.children').prev().css('background','red');  
});

在线样本：http://jsfiddle.net/uybPf/

当我点击A或B的子菜单时，我想实现，然后突出显示A或B.但我的代码突出了所有这些。我不想使用toggleClass()有人可以帮助修复我的代码。谢谢

Answer 1

这是因为您正在使用ul.children来执行该集合中每个元素的代码。试试这个：

$('.children a').click(function(event){ 
    event.stopPropagation();
    $("ul.children").prev().css('background','none');
    $(this).closest("ul.children").prev().css('background','red');  
});

DEMO：http://jsfiddle.net/uybPf/6/

Answer 2

$('.children a').click(function(event) {
    event.stopPropagation();
    $(this).closest('ul.children').prev().css('background', 'red');
});

http://jsfiddle.net/uybPf/2/

Answer 3

您应该使用closest或parent方法：

$('.children a').click(function (event) {
    event.stopPropagation();
    $('.page_item a').removeClass('highlight'); // remove previously active class
    $(this).closest('.children').prev().addClass('highlight');
});

http://jsfiddle.net/uybPf/3/

您应该更好地使用addClass和removeClass方法而不是css，因为您已经在CSS中定义了.highlight类。

Answer 4

试试这个

$('.children a').click(function(event){ 
    event.stopPropagation();
    $('>a:first', $(this).closest('.children').closest('.page_item')).css('background', '#f00')
});

然而， unhighlight 以前突出显示的父

阅读完问题的评论后，请修改

添加

$('.page_item > a').css('background','transparent');

之后

event.stopPropagation();

Answer 5

试试这个

$('.children a').click(function (event) {
    event.stopPropagation();
    $(this).closest('ul.children').parent().children('a').css('background', 'red');
});

http://jsfiddle.net/uybPf/2/

prev或兄弟姐妹选择jQuery

5 个答案: