如何通过按下标签<a>显示隐藏内容使用选择器

How to show hidden content by pressing tag <a> using selector?

本文关键字：隐藏 选择器 显示 何通过 下标 标签      更新时间：2023-09-26

我有一个。content里面有'many'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>

simple 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(添加到标签<a>的类名id):

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

但是，当我有例如100div，这是不实际的识别每个<a>与id，并把这个id在。hidden类

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

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

我认为你可以使用parent()和children()来做到这一点。

下面是一个例子:

$('.show_more').click(function(){
   $(this).parent().children('.hidden').slideDown();
});

看看你的html，你要显示/隐藏的元素是下一个元素，所以.next()可能是你最好的选择-

$('.show_more').click(function(){
  if ($(this).next("div.hidden:visible").length == 0)
    $(this).next("div.hidden").slideDown();
  else
    $(this).next("div.hidden").slideUp ();
});
相关文章：