0

我有一个代码，当我单击特定元素时，它的背景应该通过删除所有其他元素背景来改变。但是我遇到的问题是，当我在 ul li 下单击 li 时，它的父 li 也将提供背景。请在下面检查我的代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta name="" content="">
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("ul li ul li").click(function() {  

 //a = $(this).html();         // when clicking any of these links
 //alert(a);
$("*").removeClass("active"); // remove highlight from all links
$(this).addClass("active");          // add highlight to clicked link
})
});
</script>

<script type="text/javascript">
$(document).ready(function(){
$("ul li").click(function() {  

//a = $(this).html();         // when clicking any of these links
//alert(a);
$("*").removeClass("active"); // remove highlight from all links
$(this).addClass("active");          // add highlight to clicked link
})
});
</script>

<style>
.active { color:white; background:green; }
</style>
</head>
<body>
<ul>
<li>level1
        <ul>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
        </ul>
</li>
<li>level2</li>
<li>level3</li>
</ul>

</body>
</html>
4

4 回答 4

2

问题是您的事件正在传播到父级，因此代码首先在子级的单击处理程序中执行ul li，然后在父级的单击处理程序中再次执行ul li。

event.stopPropagation()在孩子的处理程序中添加一个调用：

$(document).ready(function(){
    $("ul li").click(function(evt) {  
        $(".active").removeClass("active"); // remove highlight from all links
        $(this).addClass("active");          // add highlight to clicked link
        evt.stopPropagation();
    })
});

小提琴

或者，如果您需要将事件传播到其他地方，但不在此代码中处理，您可以event.target比较this：

$(document).ready(function(){
    $("ul li").click(function(evt) {  
        if(evt.target !== this) return; //do not process on bubbled-up events

        $(".active").removeClass("active"); // remove highlight from all links
        $(this).addClass("active");          // add highlight to clicked link
    })
});

小提琴

于 2013-09-06T07:22:24.500 回答
0

用简单的方法试试，

$(document).ready(function(){
    $("li").on('click',function() {  
        $(this).parent('ul').find('li').removeClass("active");// get all li from the parent ul
        $(this).addClass("active");// add highlight to clicked link
    });
});

如果你想active classes从所有中删除所有li's然后试试这个，

$(document).ready(function(){
    $("li").on('click',function() {  
        $('li').removeClass("active");// remove active class from all li's
        $(this).addClass("active");// add highlight to clicked link
    });
});
于 2013-09-06T07:19:11.973 回答
0

试试这个你的脚本：

jQuery 10 版本

$(document).ready(function(){
    $('ul li ul li').on('click', function() {
        $('ul li ul li').removeClass('active');
        $(this).addClass('active');
    });
});

哎呀抱歉，如果您使用较低版本的 jquery

jquery 1.3 会很好

    $(document).ready(function(){
        $('ul li ul li').live('click', function() {
            $('ul li ul li').removeClass('active');
            $(this).addClass('active');
        });
    });

编辑

你想要这样的东西：

var Test = {
    init:function() {
        $('ul li').click(function() {
            $('li').removeClass('active');
            $(this).addClass('active');
            $(this).children().css({
                'background' : '#fff',
                'color' : '#000'
            });
        });
    }
}

$(document).ready(function(){
    Test.init();
});
于 2013-09-06T07:34:54.513 回答
0

它就像魅力一样

需要在代码的第 21 行进行更改。

采用：

$("ul li ul li").click(function() {

代替

$("ul li").click(function() {
于 2013-09-06T07:49:14.437 回答