Question

我正在尝试使用一段jquery切换我的div＆＃39; float_column3＆＃39;当用户点击我的父div＆＃39;标题时。

我有多次出现的div＆＃39; float_column3＆＃39;和＆＃39;标题＆＃39;所以我试图使用这个父母，以便它只显示＆＃39; float_column3＆＃39;父div的标题＆＃39;标题＆＃39;用户点击的。

    <div class="align"><p class="header">Access Platforms</p>

     <div class="float_column3">
     {SHOW WHEN USER CLICKS PARENT DIV 'HEADER'}
     </div>

    </div>

   <div class="align"><p class="header">Access Platforms</p>

     <div class="float_column3">
     {SHOW WHEN USER CLICKS PARENT DIV 'HEADER'}
     </div>

    </div>

   <div class="align"><p class="header">Access Platforms</p>

     <div class="float_column3">
     {SHOW WHEN USER CLICKS PARENT DIV 'HEADER'}
     </div>

    </div>

JQUERY：

<script>

$(".header").click(function()
{
    $(this).parent().next('.float_column3').toggle();


});

</script>

我的＆＃39; float_column3＆＃39; div有一个css display：none，当用户点击“标题”时，应该切换/显示然后在用户再次点击它时再次切换/隐藏。

我的问题是这段代码根本没有执行。有人可以告诉我哪里出错了吗？感谢

Answer 1

.float_column3是被点击元素的兄弟，而不是其父元素的兄弟。使用：

$(".header").click(function(){
 $(this).next().toggle();
});

Answer 2

将next更改为find：

 $(this).parent().find('.float_column3').toggle();

Answer 3

试试这个：

jQuery(document).ready(function () {

    jQuery(".header").click(function () {
         jQuery(".float_column3").toggle();
    });
});

截至此fiddle

如果用户点击外/父div，jquery切换div？

3 个答案: