0

私は次のhtmlを持っています:

<div class="contentBlock">
  <div><img src="images/help.png" alt="help button" class="helpButton"></div>
  <div class="helpBlock">
    <p>...some hidden text...</p>
  </div> <!-- end .helpBlock -->
  <h2>A Header</h2>
  <p>...some visible text...</p>
</div> <!-- end .contentBlock -->

私は次のcssを持っています:

div.contentBlock {
  position: relative; /* required for z-index */
  z-index: 1; /* interacts with div.helpBlock */
}
div.helpBlock {
  display: none;
  position: relative; /* required for z-index */
  z-index: 10; /* interacts with div.contentBlock */
}

私は次のjQueryを持っています:

$(document).ready(function() {
  // Show helpBlock on page
  $('img.helpButton').click(function(){
    /*$(this).closest('.helpBlock').show();*/ // does not work
    /*$(this).closest('.helpBlock').css('display');*/ // does not work
    var $contentWrapper = $(this).closest('.helpBlock');
    var $siblings = $contentWrapper.siblings('.helpBlock');
    $siblings.find('.helpBlock').show(); // does not work
  });
  // end Show helpBlock
}) // end jQuery Functions

ヘルプ ボタンをクリックしたときに .helpBlock を表示しようとしていますが、jquery がどれも機能していません。

誰でも手伝ってもらえますか?

ありがとう。

4

2 に答える 2

4

ボタンは DIV で囲まれているため、.closest() または .find() は使用されません。すでにボタンをクリックしています。そこから.parent()と.next$(this) () を使用してナビゲートできます。

$(this).parent().next('.helpBlock').show();

それはうまくいくはずです。これにより、不要な変数も削除されます。

var $contentWrapper = $(this).closest('.helpBlock');
var $siblings = $contentWrapper.siblings('.helpBlock');
于 2013-03-06T18:33:38.980 に答える
1

これを試してください：

$('img.helpButton').click(function(){
   var $contentWrapper = $(this).parent();
   var $siblings = $contentWrapper.siblings('.helpBlock');
   $siblings.show();
});

ワンライナーが必要な場合：

$('img.helpButton').click(function(){
   $(this).parent().siblings('.helpBlock').show();
});
于 2013-03-06T18:35:38.480 に答える