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

これは、ヘッダーをクリックしたときに子要素を表示/非表示にするコードです。デモ

$('.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();
});
  • このコードは、イベント委任を使用し、-要素に単一のリスナーのみを割り当て、クラスを持つ要素と、クラスを持つ少なくとも1つの子孫<body>のクリックイベントをリッスンします。そのような要素がクリックされると、クリックされたクラスの子孫要素が表示され、その後、クラスを持つ祖先を持つクラスを持つすべての要素が非表示になります。headerbodyheaderbodybodyheader
  • クリックイベントには名前空間があります。これにより、同じ要素にバインドされている他のイベントハンドラーと競合することなく、イベントハンドラーのバインドを簡単に解除できます。

こちらのデモ。

于 2012-06-28T00:20:30.437 に答える
1

すべてのdiv を非body表示にし、クリックされた div を使用して、body クラスが適用された次の div を取得します

jsフィドル

$('.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 に答える
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

このようなことを意味しますか？

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

デモ: http://jsfiddle.net/8UCma/

于 2012-06-28T00:07:19.353 に答える
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 に答える