jquery - 如何通过 jQuery 显示隐藏的内容块

Question

我有以下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 都没有工作。

有人可以帮忙吗？

谢谢。

Answer 1

因为您的按钮包含在 DIV 中，所以它不会使用 .closest() 或 .find()。您已经点击了该按钮，您可以使用.parent()和.next()$(this)从那里导航：

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

那应该行得通。这也应该消除不必要的变量：

var $contentWrapper = $(this).closest('.helpBlock');
var $siblings = $contentWrapper.siblings('.helpBlock');

Answer 2

试试这个：

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

如果你想要一个班轮：

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