如何同时显示隐藏的 <dl> 元素？

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> 元素没有出现。而我想要发生的是，当您点击 View More 时，另一个 <dl> 会出现，而当您点击 Hide More 时，在点击 Hide More 时将隐藏的那个隐藏起来strong>显示更多

我可以做到这一点：一个接一个地显示其余的 <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

Answer 2

请检查以下工作代码。我已经修改了您的代码而不是 id 我正在使用类（正如@Ricardo Pontual 所说，您不能在文档中多次使用相同的 id）。

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 change1</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 change</dd>
</dl>

JS

$(function(){
      var select = $('.dl');
       select.filter(":gt(0)").hide();
       if(select.length > 1){  
       $('.dl:last').after($("<a href='#'>View      
       More</a>").click(function(e){
            e.preventDefault();
            $(this).text($(this).text() == "View More"?"Hide More":"View
  More").prevAll("dl").nextUntil("dt").filter(":gt(0):not('a')").toggle()
        }));
    }
});

Answer 3

试试这个。我对您现有的代码做了一些更改，并删除了一些我认为不需要或矫枉过正的逻辑。此外，为了切换文本名称，我使用了 toggleClass() 表达式（不知何故，我认为进行文本比较不是最佳方式）。

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

     if($dd.length > 1){  
         $dd.last().after($("<a href='#' class='visible'>View More</a>").click(function(e){             
              e.preventDefault();            
              $dl.siblings().toggle();
              $(this).text($(this).attr("class") == "visible"? "Hide More":"View More");
                $(this).toggleClass('visible invisible'); 
                $(this).show();
              })
         )           

     }
   });

https://jsfiddle.net/hc0mq4n9/8/