如何通过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工作。

任何人都可以协助吗？

THanks。

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