jquery - Jquery通过单个类名隐藏/显示多个划分

Question

HTML

  <p class="heading"></p>
<div id="div1" class="targetDiv">content1</div>
 <p class="heading"></p>
<div id="div2" class="targetDiv">content2</div>
 <p class="heading"></p>
<div id="div3" class="targetDiv">content3</div>
 <p class="heading"></p>
<div id="div4" class="targetDiv">content4</div>


<script type="text/javascript">
    jQuery(document).ready(function() {
              jQuery(".targetDiv").hide();
              //toggle the componenet 
              jQuery(".heading").click(function()
              {
                jQuery(this).next(".targetDiv").slideToggle(500);

              });
            });
    </script>

在这里，我可以在单击标题时显示一个 div，但是当我要打开另一个时，它必须被隐藏。事实上，当我打开一个 div 时，其他必须隐藏。

请帮助我...

提前致谢

Answer 1

这应该可以解决问题：

<script type="text/javascript">
    jQuery(document).ready(function() {
              jQuery(".targetDiv").hide();
              //toggle the componenet 
              jQuery(".heading").click(function()
              {
                jQuery(".targetDiv").slideUp();
                jQuery(this).next(".targetDiv").slideToggle(500);

              });
            });
</script>

一个小解释：它首先隐藏所有 div，然后打开一个。我应该做得那么快，你将无法看到它。

Answer 2

$(".heading").click(function() {                        
    $('.targetDiv:visible').hide();  /* reference to the single previous
                                      *  opened tab and hide it 
                                      */
    $(this).next(".targetDiv").slideToggle(500);
});

Answer 3

你的意思是这样的：

http://jsfiddle.net/Et4gh/1/

只需添加 jQuery(".targetDiv").hide(); 也进入点击功能。