如何显示隐藏的<dl>元素一个接一个或全部同时

how to show the hidden <dl> elements one by one or all at the same time?

本文关键字：一个 何显示 全部 显示 隐藏 dl 元素      更新时间：2023-09-26

当您点击"查看更多"时，我试图显示隐藏的<dl>标签。在这个例子中，我有3个<dl>元素，但它可以或多或少。

<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

我不确定我完全理解你的问题，但我想这可能对你有用。

注意:正如其他人注意到的那样，你不应该多次使用同一个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');
            }
        });
    });
});

小提琴

请检查以下工作代码。我已经修改了你的代码，而不是id我使用类(@Ricardo Pontual说，你不能在一个文档中多次使用相同的id)。

<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()
        }));
    }
});

试试这个。我对你现有的代码做了一些改变，并删除了一些逻辑，我认为要么不需要，要么是多余的。此外，对于切换文本名称，我使用了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/

相关文章：