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（）。您已经点击了该按钮，可以使用$(this)并使用.parent()然后.next()从那里导航：

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

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

2 个答案: