[英]Close All Other DIVs and Positioning of hidden DIV
I have created a simple 2 step accordion: http://jsfiddle.net/oampz/WkuMg/1/ 我创建了一个简单的两步手风琴: http : //jsfiddle.net/oampz/WkuMg/1/
What i would like to know is, have i used the correct jQuery to ensure that when a heading
DIV is clicked, the following content
DIV is expanded AND all other content
DIVs close. 我想知道的是,我是否使用正确的jQuery以确保单击heading
DIV时,将扩展以下content
DIV并关闭所有其他content
DIV。
jQuery: jQuery的:
$(".heading").click(function () {
var $this = $(this);
$this.next(".content").slideToggle();
$this.parent().siblings().children().next().slideUp();
return false;
});
Also, looking at the fiddle above, you can see i have tried to position the content
DIV's to the right of the heading
DIVs and at the top. 另外,查看上面的小提琴,您可以看到我尝试将content
DIV定位在heading
DIV的右侧和顶部。 I have used some CSS for this: 我为此使用了一些CSS:
CSS: CSS:
.content {
display: none;
}
.heading {
font-weight: bold;
padding: 15px 0 15px 20px;
background: GREY;
width: 30%;
}
.content {
width: 100%;
margin-left: 35%;
position: absolute;
top: -2px;
width: 60%;
}
Specifically the use of absolute and top: -2px; 具体使用绝对和顶部:-2px;
Thanks 谢谢
Yeah You did good. 是的,你做得很好。 But it would be better. 但这会更好。 Add a class to container and check the container class and do a slide function. 向容器添加一个类,并检查容器类并执行滑动功能。 if
statement will use for remove same slide repeat again. if
语句将用于删除相同的幻灯片再次重复。
$(document).ready(function(){
$(".heading").click(function () {
if ($(this).next(".content").hasClass("folded")){
$(".content").slideUp();
$(".unfolded").toggleClass("folded").toggleClass("unfolded");
$(this).next(".content").toggleClass("folded").toggleClass("unfolded").slideDown();
}
return false;
});
});
Your code works and makes sense, you may improve by putting some delay in the apparition of the new content, for a nicer transition http://jsfiddle.net/WkuMg/2/ 您的代码有效且有意义,您可以通过在新内容的显示中添加一些延迟来进行改进,以实现更好的过渡http://jsfiddle.net/WkuMg/2/
setTimeout(function(){
$this.next(".content").slideToggle();
}, 200);
You also can work with classes, so you do not have to sort your HTML this way and pack all headers in one part, all content on the other. 您还可以使用类,因此您不必以这种方式对HTML进行排序,而是将所有标头打包在一个部分中,而将所有内容打包在另一部分中。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.