是否可以顯示一個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項，其他說明必須隱藏，只有第一個標題的描述是可見的。
如何做到這一點..？

來源

2012-08-09 Rikin Thakkar

隱藏所有.content所選.content的兄弟姐妹：

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

來源

2012-08-09 11:48:52 ori

不錯，乾淨，最好的答案。 – Christoph 2012-08-09 11:53:34

當我把這段代碼放到我的js中時，我無法得到輸出。在哪裏寫這個代碼..？ – 2012-08-09 11:57:55

爲什麼它不能在我的任何瀏覽器中工作..？ – 2012-08-09 12:15:18

這不行嗎？

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/

來源

2012-08-09 11:48:39 paulslater19

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

FIDDLE

來源

2012-08-09 11:48:45 adeneo

有趣的是，兩個傢伙如何用相同的評論發送相同的答案！ – 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:49:45

其不工作 – 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); 
    });

希望對你有用..

來源

2012-08-09 11:51:00 Santhiya

你得找出它這樣做。您可以使用類來通過創建具有其他名稱的克隆進行標識，而不是通過類獲取標籤並隱藏而不隱藏所有內容。

來源

2012-08-09 11:51:43 Gustavo

是否可以顯示一個div並隱藏所有其他div切換..？

回答

相關問題