是否有可能显示一个div并隐藏所有其他div切换..?

我有三个标题,三个都有一些描述。
当我点击第一个标题时,我可以看到它的描述。
当我点击第二个标题时,我可以看到它的描述。
我的代码在这里:
JS:

 jQuery(document).ready(function() { jQuery(".content").hide(); //toggle the componenet with class msg_body jQuery(".heading").click(function() { jQuery(this).next(".content").slideToggle(500); }); });  

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代码:

 

Header-1

Lorem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit

Header-2

Lorem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit

Header-3

Lorem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit

现在我希望当我点击一个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); }); });​ 

http://jsfiddle.net/cUyhe/

 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); }); });​ 

小提琴

 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'); }); }); }); 

在点击事件中试试这个..

 jQuery(".heading").click(function() { jQuery(".content").hide(); jQuery(this).next(".content").slideToggle(500); }); 

希望对你有用..

你必须确定这样做。 您可以通过使用其他名称创建克隆来识别类,而不是按类获取标记并隐藏而不隐藏所有内容。