0

http://jsfiddle.net/KevinOrin/xycCx/1/

jQuery('.happening-main-text .readmore').click(function() {                  
    jQuery('.divmore').toggle('slow');       
    return false;                                       
});

我试图让每个链接只显示/隐藏点击的那个。我怎样才能修改 JS 来做到这一点。我试过('.happening-main-text').closest('divmore')了，但也没有用。

<div class="happening-main-text">
    <p>part of text goes here part of text <a href="#" class="readmore">show/hide</a>

    </p>
    <div class="divmore">
        <p>more test from hidden1</p>
    </div>
</div>
<div class="happening-main-text">
    <p>part of text goes here part of text <a href="#" class="readmore">show/hide</a>

    </p>
    <div class="divmore">
        <p>more test from hidden</p>
    </div>
</div>
<div class="happening-main-text">
    <p>part of text goes here part of text <a href="#" class="readmore">show/hide</a>

    </p>
    <div class="divmore">
        <p>more test from hidden2</p>
    </div>
</div>
4

5 回答 5

3

如果您保留当前的 ​​HTML 格式，则以下代码应该可以工作

jQuery('.happening-main-text .readmore').click(function() {                  
    jQuery(this).parent().next().toggle('slow');       
    return false;                                       
});
于 2013-05-11T01:03:21.983 回答
0

通过查看小提琴中的 DOM，这可能是解决它的一种方法：

jQuery('.happening-main-text .readmore').click(function() {                  
    jQuery(this).parent().next().toggle('slow');
    return false;
}

查看文档中的$.next和$.parent。此外，您可能会注意到动画“跳跃”，这是因为p（相关 SO 问题）上的边距。删除边距将解决此问题。例如：

p { margin: 0; }
于 2013-05-11T01:03:54.890 回答
0

凯文，试着走这条路：

$('.happening-main-text').each(function() {
    $divmore = $(this).find(".divmore");
    $readmore = $(this).find(".readmore");
    $readmore.bind("click", {target: $divmore}, function(e) {
        e.data.target.toggle();
    });
});

由于 html 的结构，您需要将不同的目标传递给每个点击回调。稍微重构一下 DOM 将允许您使用 $().siblings 或其他更简单的解决方案。无论如何，您可以在这里查看您的小提琴的工作版本：http: //jsfiddle.net/xycCx/6/

于 2013-05-11T01:15:32.360 回答
0

解决方案如下（http://jsfiddle.net/4nJWf/）：

注意：原始 HTML 中的错误修复

HTML

<div class="happening-main-text">
    <p>part of text goes here part of text <a href="#" class="readmore">show/hide</a>
    </p>
    <div class="divmore">
        <p>more test from hidden1</p>
    </div>
</div>
<div class="happening-main-text">
    <p>part of text goes here part of text <a href="#" class="readmore">show/hide</a>
    </p>
    <div class="divmore")">
        <p>more test from hidden</p>
    </div>
</div>
<div class="happening-main-text">
    <p>part of text goes here part of text <a href="#" class="readmore">show/hide</a>
    </p>
    <div class="divmore">
        <p>more test from hidden2</p>
    </div>
</div>

jQuery

jQuery('.happening-main-text .readmore').click(function() {                  
    $(this).parents('.happening-main-text').children('.divmore').toggle('slow');       
    return false;                                       
  });
于 2013-05-11T01:25:37.137 回答
0

我知道这已经得到解答，但看起来课程中的隐藏文本divmore没有显示在解决方案中，而是隐藏了happening-main-text课程的其余部分。

它应该只将.divmore类立即切换到单击的<a>类，如下所示：

$(document).ready(function(){
    $(".readmore").click(function(){
     $(this).parent("p").siblings("div").toggle("slow");        
  });

});

这是我的小提琴

于 2013-05-11T03:56:57.227 回答