3

我在一个页面上有几个链接，它们都具有相同的类“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如下，但它目前使用“隐藏内容”类扩展所有内容（原因很明显），我不知道如何操作代码，所以它也只显示它需要的内容。

javascript:

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

JSFIDDLE 演示：http: //jsfiddle.net/PsAh9/

4

4 回答 4

8

用于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;   
    });
});
于 2013-08-15T19:32:47.700 回答
4

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

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

删除 <a> 然后：

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

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

见JSFiddle

于 2013-08-15T19:40:51.677 回答
2

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

$(function() {
    var curPage="";
    $("#menu a").click(function() {
       if (curPage.length) { 
            $("#"+curPage).hide();
        }
        curPage=$(this).data("page");
        $("#"+curPage).show();
    });
});
于 2013-10-22T09:14:18.420 回答
2

使用next.

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

href="#"此外，使用href="#null"-而不是，#将跳转到页面顶部。

于 2013-08-15T19:33:07.033 回答