显示隐藏最接近元素点击

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>

来源

2013-05-11 KevinOrin

最近如何？最近的兄弟姐妹？后裔？祖先？谁能告诉你如何选择我们看不到的DOM元素？ – 2013-05-11 01:01:25

如果您持续HTML当前的格式下面的代码应该工作

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

来源

2013-05-11 01:03:21

多数民众赞成它，谢谢！ – KevinOrin 2013-05-11 02:07:26

通过查看你的小提琴的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; }

来源

2013-05-11 01:03:54 Christoffer

其实这比我的要好:)。 – sixFingers 2013-05-11 01:16:43

凯文，尝试走这条路：

$('.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/

来源

2013-05-11 01:15:32 sixFingers

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

注：无论如何，你可以在这里你捣鼓的工作版本看看bug修复在原始的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-11 01:25:37

我知道这已经回答了，但它看起来像在课堂上divmore隐藏文字在溶液中没有显示，而是它隐藏了happening-main-text类的其余部分。

它应该只切换.divmore类直接到点击<a>像下面这样：

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

}）;

这里是我的fiddle

来源

2013-05-11 03:56:57 Edper

显示隐藏最接近元素点击

回答

相关问题