Question

我有一个代码，当我点击特定元素时，它的背景应该通过删除所有其他元素背景来改变。但是我在这里得到的问题是当我点击它下面的li li ul它也采取了父李而且给予背景。请检查下面的代码

<!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>

Answer 1

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

在孩子的处理程序中添加对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();
    })
});

Fiddle

或者，如果您需要将事件传播到其他位置但未在此代码中处理，则可以将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
    })
});

Fiddle

Answer 2

以简单的方式尝试，

$(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
    });
});

Answer 3

试试这个脚本：

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(); });

Answer 4

它作为魅力

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

使用：

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

而不是

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

更改CSS onclick函数javascript

4 个答案: