Question

当用户点击其对应的父DIV时，我正在尝试显示/隐藏DIV。

HTML：

<div class="header" id="header_1"> </div>
  <div class="body" id="body_1"> </div>


<div class="header" id="header_2">  </div>
  <div class="body" id="body_2"> </div>

jQuery的：

$('.body')hide(); <--- hide all on load
$('.header').click(function(){
     var currentHeader = $(this).attr('id');

     //some logic to show the body div below the header that was clicked, and hide all the others 

 });

Answer 1

隐藏所有body div然后使用单击的div，获取应用了body类的下一个div

jsFiddle

$('.header').click(function(){
     var currentHeader = $(this);
     // hide all the body divs
     $('.body').hide();
     // show the next body div
     currentHeader.next('.body').show();

});

Answer 2

这是代码在单击标题时显示/隐藏子元素。 demo

$('.body').hide();
$('.header').click(function() {
    if (!$(this).hasClass('Active')) {
        $(this).find('.body').show();//show child div
        $(this).addClass('Active');
    } else {
        $(this).find('.body').hide();//hide child div
        $(this).removeClass('Active');
    }
});

Answer 3

$('body').on('click.headerClick', '.header:has(.body)', function (e) {
  $('.header .body').not($(this).find('.body').show()).hide();
});

此代码使用event delegation，仅在<body> - 元素上分配单个侦听器，侦听具有类header的任何元素上的单击事件，并且至少有一个后代有一个班级body。如果单击此类元素，则会显示所单击的header具有类body的所有后代元素，之后，它会隐藏具有类body的所有元素，该类具有类header的祖先{1}}。
点击事件为namespaced。这允许我们轻松解除绑定事件处理程序，而不会与绑定到同一元素的其他事件处理程序发生冲突。

Demo here.

Answer 4

你的意思是这样吗？

$(".header").on("click", function() {
    $(".body").not($(this).find(".body").show()).hide();
});

DEMO： http://jsfiddle.net/8UCma/

Answer 5

最简单的方法是隐藏所有元素，然后只显示当前元素：

$('.body').hide();
$('.header').click(function(){
    // hide all other elements        
    $('.body').hide();
    // show the current one
    $(":first-child", $(this)).show();
});

如果存储对当前活动元素的引用，则更好的解决方案。

var activeElement = null;

$('.body').hide();
$('.header').click(function(){
    // hide the last one     
    if(activeElement) {
        activeElement.hide();
    }
    // show the current one
    activeElement = $(":first-child", $(this));
    activeElement.show();

});

Answer 6

找到一个聪明的解决方法:(感谢您的帮助，尽管！:-)）

HTML：

<ul> 
<li class='title' id='title 2> </li> 
<li class='section' id ='section 2'> </li>
</ul>

jQuery的：

$('.title').click(function(){
    $('.section').slideUp('fast');
    $(this).siblings('.section').slideDown('fast');
});

jQuery：如何选择div并显示/隐藏其嵌套div

6 个答案: