Question

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>

Answer 1

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

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

Answer 2

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

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

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

p { margin: 0; }

Answer 3

凯文，试着这样：

$('.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将允许您使用$（）。兄弟姐妹或其他更简单的解决方案。无论如何，你可以在这里查看你的小提琴的工作版本：http://jsfiddle.net/xycCx/6/

Answer 4

解决方案如下（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;                                       
  });

Answer 5

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

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

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

}）;

这是我的fiddle

显示最近隐藏的最近元素

5 个答案: