Question

我正在尝试创建在展开时显示文本的框，并在收缩时再次隐藏，但我无法弄清楚如何仅在子元素上触发事件单击某个框时，单击任何框时，所有框的所有子项都会受到影响。

这是我的代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

<style>
.div{
    height: 50px;
    width: 100px;
    background-color: grey;
}

.cont{
}

.expa{
    display:none;
}
</style>

<script src="jquery-1.11.1.js"></script>
</head>

<body>
<div class=div>
    <p class=cont>Caption</p>
    <p class=expa>String to show when expanded and hide when contracted</p>
</div>
<br>
<div class=div>
    <p class=cont>Caption</p>
    <p class=expa>String to show when expanded and hide when contracted</p>
</div>

<script>
$(document).ready(function(){
var contracted = true;
    $(".div").click(function(){
        if(contracted){
            $(this).animate({height:"200px", width:"600px"}, 200);
            $(".cont").css({display: 'none'});
            $(".expa").delay(200).fadeIn(200);
            contracted = false;
        }else{
            $(this).animate({height:"50px", width:"100px"}, 200);
            $(".cont").delay(200).fadeIn(200);
            $(".expa").css({display: 'none'});
            contracted = true;
        };
    });
});
</script>
</body>
</html>

问题是单击任何.div元素会触发.cont和.expa类的所有元素，而不仅仅是触发单击.div的那些元素。

在Stackoverflow和其他地方搜索只处理通过与子元素交互触发父元素事件的问题。

我已经摆弄了.on（）,. parent（）,. kidren（），并且在没有找到任何内容的情况下浏览了jQuery文档。

Answer 1

您需要使用（在您的情况下）$(this).find(...)使选择器相对于您点击的内容。使用$(".cont")之类的内容将选择该类的所有元素，而$(this).find(".cont")只会搜索您点击的内容的后代元素。例如：

变化：

$(".cont").css({display: 'none'});
$(".expa").delay(200).fadeIn(200);

为：

$(this).find(".cont").css({display: 'none'});
$(this).find(".expa").delay(200).fadeIn(200);

Answer 2

$(".cont").css({display: 'none'});
$(".expa").delay(200).fadeIn(200);

这实际上意味着“将所有元素与类”连接起来并改变css。然后，使用类“expa”获取所有元素并将其淡入。“

因此，如果您只需对那些当前为子项的项目应用操作，您可以使用以下功能：

$(this).find(".cont").css({display: 'none'});
$(this).find(".expa").delay(200).fadeIn(200);

它会在当前div中找到具有此类名称的元素，并将这些更改应用于它们。

Answer 3

您必须使用点击的元素作为搜索context因click事件而要操纵的元素的contracted。但是，我认为你可能仍然会得到一些不良结果。我认为这是（或更接近）你的意图。使用click属性，而不是使用全局变量data，为每个$(document).ready(function(){ $(".div").data('contracted', true).click(function(){ var contracted = $(this).data('contracted'); if(contracted) { $(this).animate({height:"200px", width:"600px"}, 200); $(".cont",this).css({display: 'none'}); $(".expa",this).delay(200).fadeIn(200); $(this).data('contracted',false); } else { $(this).animate({height:"50px", width:"100px"}, 200); $(".cont",this).delay(200).fadeIn(200); $(".expa",this).css({display: 'none'}); $(this).data('contracted',true); } }); });候选人使用本地化变量：

$(document).ready(function(){
    $(".div").data('contracted', true).click(function(){
        var contracted = $(this).data('contracted');
        if(contracted) {
            $(this).animate({height:"200px", width:"600px"}, 200);
            $(".cont",this).css({display: 'none'});
            $(".expa",this).delay(200).fadeIn(200);
            $(this).data('contracted',false);
        } else {
            $(this).animate({height:"50px", width:"100px"}, 200);
            $(".cont",this).delay(200).fadeIn(200);
            $(".expa",this).css({display: 'none'});
            $(this).data('contracted',true);
        }
    });
});

.div{
    height: 50px;
    width: 100px;
    background-color: grey;
}

.cont{
}

.expa{
    display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class=div>
    <p class=cont>Caption</p>
    <p class=expa>String to show when expanded and hide when contracted</p>
</div>
<br>
<div class=div>
    <p class=cont>Caption</p>
    <p class=expa>String to show when expanded and hide when contracted</p>
</div>

{{1}}

单击父级触发子元素事件

3 个答案: