如何通過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(); 
});