事件处理程序仅在当前div元素上工作并触发其关联的子元素。
事件处理程序仅在当前div元素上工作并触发其关联的子元素。
提问于 2015-08-24 15:09:29
我在另一个div中有div，如下所示。下面还提到了jquery和css代码。
$(document).ready(function(){
$("#banner_animate").click(function () {
$(this).toggleClass('maximized');
/*$("div#hide").toggleClass('show');*/
$('#banner_animate>div#hide').toggleClass('show');
});
});#banner_animate.maximized {
height:75px;
transition: height 0s linear;
border:1px solid black;
padding:10px;
width:300px;
}
#banner_animate {
height:20px;
transition: height 0s linear;
border:1px solid black;
padding:10px;
width:300px;
float: right;
}
#hide{
visibility: hidden;
}
#hide.show {
visibility: visible;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="banner_animate" style="background:#F2F2F6"><font face ="Times New Roman" size="4">first </font>
<div id=hide>
more description goes here <br>
<a href="http://www.abcd.com">Read more!</a>
</div>
</div>
<div id="banner_animate" style="background:#F2F2F6"><font face ="Times New Roman" size="4">second </font>
<div id="hide">
more description goes here <br>
<a href="http://www.abcd.com">Read more!</a>
</div>
</div>
我的意图是先点击，框应该展开，相关的文本(更多的描述在这里.)应该显示。同样的情况应该适用于单击第二次。
Current output--单击"first"，最大化该框，并在"first“和"second”中打印相关文本(子元素-div)。“第二”是不可点击的。
有什么建议吗？
回答 3
Stack Overflow用户
发布于 2015-08-24 15:14:01
您的两个横幅都有相同的ID banner_animate。换一个吧。
编辑以获得更详细的内容:行$('#banner_animate>div#hide').toggleClass('show');应用于id banner_animate的所有元素，因此您的两个横幅都会被打开。
这正是is在页面上应该是唯一的原因。
Stack Overflow用户
发布于 2015-08-24 15:24:47
首先，您不应该在同一个DOM中有2个ID。但是，如果您希望它们是相同的，您可以将它们更改为一个类。(对banner_animate和hide都这样做)
另外，你正在做的是切换两个皮，所以你需要一个选择器，告诉它的确切的一个切换。
jsFiddle：https://jsfiddle.net/80cy6q2c/
Stack Overflow用户
发布于 2015-08-24 15:42:38
下面是您的代码的工作版本(请参阅下面的说明)：
$(document).ready(function(){
$(".banner_animate").click(function () {
$(this).toggleClass('maximized');
});
});.banner_animate.maximized {
height:75px;
transition: height 0s linear;
border:1px solid black;
padding:10px;
width:300px;
}
.banner_animate {
height:20px;
transition: height 0s linear;
border:1px solid black;
padding:10px;
width:300px;
float: right;
}
.hide{
visibility: hidden;
}
.banner_animate.maximized > .hide {
visibility: visible;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="banner_animate" style="background:#F2F2F6"><font face ="Times New Roman" size="4">first </font>
<div class="hide">
more description goes here <br>
<a href="http://www.abcd.com">Read more!</a>
</div>
</div>
<div class="banner_animate" style="background:#F2F2F6"><font face ="Times New Roman" size="4">second </font>
<div class="hide">
more description goes here <br>
<a href="http://www.abcd.com">Read more!</a>
</div>
</div>
我所做的是：
- 将所有ID属性替换为类属性，因为不应该对多个元素使用相同的ID；
- 使
.maximized类将隐藏的div设置为可见的，从而消除了对.show类的需求； - 删除设置JavaScript类的
.show代码，因为不再需要它。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/32185723
复制相关文章
相似问题
腾讯云开发者
