是否可以显示一个div并隐藏所有其他div切换..?
我有三个标题,所有三个都有一些描述。
当我点击第一个标题,我可以看到它的描述。
当我点击第二个标题,我可以看到它的描述。
我的代码是在这里:
JS:是否可以显示一个div并隐藏所有其他div切换..?
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(".content").hide();
//toggle the componenet with class msg_body
jQuery(".heading").click(function()
{
jQuery(this).next(".content").slideToggle(500);
});
});
</script>
CSS:
.layer1 {
margin: 0;
padding: 0;
width: 500px;
}
.heading {
margin: 1px;
color: #fff;
padding: 3px 10px;
cursor: pointer;
position: relative;
background-color:#c30;
}
.content {
padding: 5px 10px;
background-color:#fafafa;
}
p { padding: 5px 0; }
的html代码:
<div class="layer1">
<p class="heading">Header-1 </p>
<div class="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit</div>
<p class="heading">Header-2</p>
<div class="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit</div>
<p class="heading">Header-3</p>
<div class="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
现在我想,当我点击一个1项,其他说明必须隐藏,只有第一个标题的描述是可见的。
如何做到这一点..?
隐藏所有.content
所选.content
的兄弟姐妹:
jQuery(".heading").click(function() {
jQuery(this)
.next(".content").slideToggle(500)
.siblings(".content").slideUp(500);
});
这不行吗?
jQuery(document).ready(function() {
jQuery(".content").hide();
//toggle the componenet with class msg_body
jQuery(".heading").click(function() {
jQuery(".content").slideUp();
jQuery(this).next(".content").slideDown(500);
});
});
jQuery(document).ready(function() {
jQuery(".content").hide();
//toggle the componenet with class msg_body
jQuery(".heading").click(function() {
jQuery(".content").not(jQuery(this).next(".content")).slideUp(500);
jQuery(this).next(".content").slideToggle(500);
});
});
有趣的是,两个家伙如何用相同的评论发送相同的答案! – 2012-08-09 11:49:57
难道是因为我们复制了问题中的代码? – adeneo 2012-08-09 11:51:11
jQuery(document).ready(function() {
//toggle the componenet with class msg_body
jQuery(".heading").click(function()
{
jQuery(this).parent().find(".opened").slideToggle(500, function(){
$(this).removeClass('opened');
});
jQuery(this).next(".content").slideToggle(500, function(){
$(this).addClass('opened');
});
});
});
其不工作 – 2012-08-09 11:59:47
请查看http://jsfiddle.net/94Jvw/。它在那里工作... – 2012-08-09 12:06:24
它在那里工作,我不为什么它不在我的电脑上工作。 :( – 2012-08-09 12:10:50
在C尝试此舔事件..
jQuery(".heading").click(function()
{
jQuery(".content").hide();
jQuery(this).next(".content").slideToggle(500);
});
希望对你有用..
你得找出它这样做。您可以使用类来通过创建具有其他名称的克隆进行标识,而不是通过类获取标签并隐藏而不隐藏所有内容。
不错,干净,最好的答案。 – Christoph 2012-08-09 11:53:34
当我把这段代码放到我的js中时,我无法得到输出。在哪里写这个代码..? – 2012-08-09 11:57:55
为什么它不能在我的任何浏览器中工作..? – 2012-08-09 12:15:18