Question

我在另一个div中有div，如下所示。还提到了下面的jquery和css代码。

＆＃13;

$(document).ready(function(){
	$("#banner_animate").click(function () {
		$(this).toggleClass('maximized');
		/*$("div#hide").toggleClass('show');*/
		$('#banner_animate>div#hide').toggleClass('show');
	});
	
});

＆＃13;

#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;
  }

＆＃13;

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

＆＃13;

我的意图是 首先点击，框应该展开，相关的文字（更多描述在这里......）应该显示。点击第二个也应该适用。

当前输出 - 点击＆＃34;首先＆＃34;，最大化框并在＆＃34;第一＆＃34;中打印相关文本（子元素-div）。和＆＃34;第二＆＃34;。＆＃34;第二＆＃34;不可点击。

有什么建议吗？

Answer 1

首先，你不应该在同一个DOM中拥有2个ID。但是如果你想要它们是相同的，你可以将它们改为一个类。（对banner_animate和hide）

执行此操作

另外，你正在做的是切换两个生皮，这样你就需要一个选择器，告诉它究竟要切换哪一个。

jsFiddle：https://jsfiddle.net/80cy6q2c/

Answer 2

以下是您的代码的工作版本（请参阅下面的说明）：

$(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类的需要;
删除了设置.show类的JavaScript代码，因为不再需要它。

事件处理程序仅在当前div元素上工作并触发其关联的子元素

2 个答案: