如何顯示隱藏 <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>元素沒有顯示。 我想發生的是，當您單擊“ 查看更多”時 ，另一個<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');
            }
        });
    });
});

小提琴

Answer 2

嘗試這個。 我對您現有的代碼進行了很少的更改，並刪除了一些我認為不需要或過大的邏輯。 另外，為了切換文本名稱，我使用了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/

Answer 3

請檢查以下工作代碼。 我已經在使用類而不是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()
        }));
    }
});