javascript - 如何将隐藏的元素一个一个显示或者同时全部显示？

Question

我正在尝试显示隐藏的 <dl>单击“查看更多”时的标签。在这个例子中我有 3 <dl>元素，但它可以或多或少。

HTML

<dl class="dl">
<dt><b>Name:</b></dt>
    <dd>My name</dd>   
<dt><b>Department</b></dt>
    <dd>My department</dd>  
<dt><b>Email</b></dt>
    <dd>My Email</dd>
</dl>

<br/>

<dl class="dl">
   <dt>Name:</dt>
    <dd>My name</dd>   
<dt>Department</dt>
    <dd>My department</dd>  
<dt>Email</dt>
    <dd>My Email</dd>
</dl>

<br/>
<dl class="dl">
<dt>Name:</dt>
    <dd>My name</dd>   
<dt>Department</dt>
    <dd>My department</dd>  
<dt>Email</dt>
    <dd>My Email</dd>
</dl>

Jquery

 $(function(){
 $("#dl").each(function(){
 var $dd = $(this).nextUntil("dt"), $this;
 $dd.filter(":gt(0)").hide();


 if($dd.length > 1){  
     $dd.last().after($("<a href='#'>View More</a>").click(function(e){
          e.preventDefault();
     $(this).text($(this).text() == "View More"?"Hide More":"View More")

  .prevAll("dt:first").nextUntil("dt").filter(":gt(2):not('a')").toggle()
     }));
 }
 });
   });

现在的问题是，当我点击“查看更多”时，没有任何反应，换句话说，其他 2 <dl>元素不显示。我希望发生的是，当您单击查看更多 时，另一个 <dl>显示并在您点击隐藏更多时隐藏点击显示更多

之前隐藏的那个

无论哪种方式我都可以做到:显示 <dl> 的其余部分元素一一显示或显示 <dl> 的其余部分元素一次全部。或/并一个一个或同时隐藏所有元素。

这是一个JSFiddle

Answer 1

我不确定我是否完全理解您的问题，但我认为这可能对您有用。

注意:正如其他人所指出的，您不应该多次使用相同的 ID，因为它们是唯一的。

HTML

<dl class="always-show">
    <dt><b>Name:</b></dt>
        <dd>My name</dd>   
    <dt><b>Department</b></dt>
        <dd>My department</dd>  
    <dt><b>Email</b></dt>
        <dd>My Email</dd>
</dl>

<br/>

<dl class="hidden">
   <dt>Name:</dt>
        <dd>My name</dd>   
    <dt>Department</dt>
        <dd>My department</dd>  
    <dt>Email</dt>
        <dd>My Email</dd>
</dl>

<br/>
<dl class="hidden">
    <dt>Name:</dt>
        <dd>My name</dd>   
    <dt>Department</dt>
        <dd>My department</dd>  
    <dt>Email</dt>
        <dd>My Email</dd>
</dl>

<a href='#'>View More</a>

CSS

.hidden{
    display: none;
}

JS

$(function(){
    $('a').on('click', function(){
        var that = $(this);

        $.each($('dl').not('.always-show'), function(){
            if($(this).hasClass('hidden')){
                $(this).removeClass('hidden');
                that.text('Hide');
            } else {
                $(this).addClass('hidden');
                that.text('View More');
            }
        });
    });
});

Fiddle