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

Answer 2

这不完全是你问的，但我会这样做：

<div class="content-holder">
    Expand Content 2
    <div class="hidden-content">Bunch of hidden content for div 2</div>
</div>

删除＆lt; a＆gt;然后：

$(".content-holder").click(function() {
    $(this).find(".hidden-content").toggle(); 
});

这会将整个区域变成显示/隐藏功能。

请参阅JSFiddle

Answer 3

使用next。

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

此外，使用href="#"而不是href="#null" - 只有一个#会跳转到页面顶部。

Answer 4

这是JSfiddle - http://jsfiddle.net/dangoodspeed/M3ZhV/，这里是代码：

$(function() {
    var curPage="";
    $("#menu a").click(function() {
       if (curPage.length) { 
            $("#"+curPage).hide();
        }
        curPage=$(this).data("page");
        $("#"+curPage).show();
    });
});

在链接下方显示/隐藏div

4 个答案: