是否可以显示一个div并在切换时隐藏所有其他div? [英] is it possible to show one div and hide all other div on toggle..?
本文介绍了是否可以显示一个div并在切换时隐藏所有其他div?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有三个标题,所有三个都有一些说明.
当我单击第一个标题时,可以看到其说明.
当我单击第二个标题时,我可以看到其描述.
我的代码在这里:
js:
I have three headings and all three have some description.
when i click on first heading, i can see its description.
when i click on 2nd heading, i can see its description.
my code is here:
js:
<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标题时,其他说明必须隐藏,而第一个标题的说明才可见.
该怎么做..?
Now i want that when i click one 1 heading, other description have to hide and just description of 1st heading is visible.
how to do this..?
推荐答案
隐藏所选.content
的所有.content
兄弟姐妹:
Hide all .content
siblings of the chosen .content
:
jQuery(".heading").click(function() {
jQuery(this)
.next(".content").slideToggle(500)
.siblings(".content").slideUp(500);
});
这篇关于是否可以显示一个div并在切换时隐藏所有其他div?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文