在链接下方显示/隐藏div

Question

我在页面上有一些链接都具有相同的类"expand-content-link",这些链接都直接在div上面,其中包含一些内容,设置为"display:none;" (具有相同的类"隐藏内容").

我希望能够单击该链接,只有链接下方的div切换为可见.

HTML

<div class="content-holder">
<a href="#" class="expand-content-link">Expand Content 1</a>
<div class="hidden-content">Bunch of hidden content and stuff here</div>
</div>

<div class="content-holder">
<a href="#" class="expand-content-link">Expand Content 2</a>
<div class="hidden-content">Bunch of hidden content for div 2</div>
</div>

<div class="content-holder">
<a href="#" class="expand-content-link">Expand Content 3</a>
<div class="hidden-content">Bunch of hidden content for div 3</div>
</div>

现在我的javascript如下,但它目前使用"hidden-content"类扩展了所有内容(原因很明显),我无法弄清楚如何操作代码,因此它只显示它所需的内容.

JavaScript的:

 <script>
    jQuery(document).ready(function() { 
        jQuery(".expand-content-link").click(function() {
            jQuery(".content-holder").find(".hidden-content", this).toggle();
            return false;   
        });
    });
</script>

JSFIDDLE DEMO:http: //jsfiddle.net/PsAh9/

Answer 1

使用this得到被点击的项目,并从那里遍历DOM到要采取行动的元素.

jQuery(document).ready(function() { 
    jQuery(".expand-content-link").click(function() {
        jQuery(this).next(".hidden-content").toggle();
        return false;   
    });
});

您可以通过上升到父div,然后找到内容div,使其对html更改更具弹性:

jQuery(document).ready(function() { 
    jQuery(".expand-content-link").click(function() {
        jQuery(this).closest('.content-holder').find(".hidden-content").toggle();
        return false;   
    });
});

或者假设内容div将是兄弟,但不一定在链接之后:

jQuery(document).ready(function() { 
    jQuery(".expand-content-link").click(function() {
        jQuery(this).siblings(".hidden-content").toggle();
        return false;   
    });
});