javascript - 如何使用选择器按标签 显示隐藏内容？

Question

我有一个 .content 里面有“很多”div:

<div class="content">

<div class="news">
   <a class="show_more" href="#">show news 1</a>
    <div class="hidden">
        <p>some news 1</p>
        <a class="close_hidden" href="#">close</a>
    </div>
</div>

<div class="news">
   <a class="show_more" href="#">show news 2</a>
    <div class="hidden">
        <p>some news 2</p>
        <a class="close_hidden" href="#">close</a>
    </div>
</div>
...
<div class="news">
   <a class="show_more" href="#">show news n</a>
    <div class="hidden">
        <p>some news n</p>
        <a class="close_hidden" href="#">close</a>
    </div>
</div>

简单的 CSS:.hidden{display:none;}

和 jQuery:

$(document).ready(function(){
$('.show_more').click(function(){
    $('.hidden').slideDown();
});
$('.close_hidden').click(function(){
    $('.hidden').slideUp();
});});

出于显而易见的原因，我的代码会打开所有隐藏的 div，即使我只单击一个 <a> 也是如此。 .

如何使用 $(this) 或类似的东西来显示隐藏的内容？

我知道使用 <a> 是可能的id(添加到标签的 .class 名称 id <a> ):

 $('.show_more').click(function () {
            $('.' + this.id).slideDown();
    });

但是当我有 100 个 div 时，识别每个 <a> 是不切实际的带有一个 id 并放入 .hidden 类这个 id。

Answer 1

您可以遍历 DOM(从被点击的元素开始)以找到正确的隐藏元素。

$('.show_more').click(function(){
   $(this).closest('.news').find('.hidden').slideDown();
});