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（）;进入点击功能。

Jquery隐藏/显示单个类名的多个除法

3 个答案: