0

当用户单击其相应的父 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 

 });
4

6 回答 6

1

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

jsFiddle

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

});
于 2012-06-28T00:06:26.507 回答
1

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

$('.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');
    }
});​
于 2012-06-28T00:19:08.287 回答
1 
$('body').on('click.headerClick', '.header:has(.body)', function (e) {
  $('.header .body').not($(this).find('.body').show()).hide();
});
  • 此代码使用事件委托，在 -element 上仅分配一个侦听器，<body>侦听具有 class 的任何元素上的单击事件header，并且至少有一个具有 class 的后代body。如果单击这样的元素，它会显示被单击的header具有 class的任何后代元素body，之后，它会隐藏所有具有 classbody且祖先具有 class 的元素header。
  • 点击事件是命名空间的。这使我们可以轻松地取消绑定事件处理程序，而不会与绑定到同一元素的其他事件处理程序发生冲突。

演示在这里。

于 2012-06-28T00:20:30.437 回答
0

你的意思是这样的吗？

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

演示：http: //jsfiddle.net/8UCma/

于 2012-06-28T00:07:19.353 回答
0

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

$('.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();

});
于 2012-06-28T00:29:07.373 回答
0

找到了一个聪明的解决方法：（感谢您的帮助！:-)）

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');
});
于 2012-06-28T05:15:33.287 回答