Javascript 如何显示隐藏的<；dl>；元素一个接一个还是同时所有元素？

我试图在您单击“查看更多”时显示隐藏的

标记。在本例中，我有3个

元素，但它可能更多或更少

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>

<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>

姓名：
我的名字
部门
我的部门
电子邮件
我的电子邮件


姓名：
我的名字
部门
我的部门
电子邮件
我的电子邮件


姓名：
我的名字
部门
我的部门
电子邮件
我的电子邮件

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

$（函数（）{
$（“#dl”）。每个（函数（）{
var$dd=$（this）.nextUntil（“dt”），$this；
$dd.filter（“：gt（0）”）.hide（）；
如果（$dd.length>1）{
$dd.last（）。在（$（“”）之后。单击（函数（e）{
e、 预防默认值（）；
$（this）.text（$（this.text（）==“查看更多”？“隐藏更多”：“查看更多”）
.prevAll（“dt:first”）.nextUntil（“dt”）.filter（“：gt（2）：not（'a'）”）。toggle（）
}));
}
});
});

现在的问题是，当我单击“查看更多”时，什么都没有发生，换句话说，其他2个

元素没有显示。我希望发生的是，当您单击“查看更多”时，会显示另一个

，当您单击“隐藏更多”时，会隐藏在单击“显示更多”之前隐藏的一个

我可以这样做：一个接一个地显示其余的

元素，或者一次显示其余的

元素。或/或同时逐个或全部隐藏元素

---

这是一个

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

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

HTML

JS

---

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

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

HTML

JS

---

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

$（“#dl”）。每个（函数（）{
var$dl=$（本）；
var$dd=$（this）.nextUntil（“dt”），$this；
$dd.filter（“：gt（0）”）.hide（）；
如果（$dd.length>1）{
$dd.last（）。在（$（“”）之后。单击（函数（e）{
e、 预防默认值（）；
$dl.sides（）.toggle（）；
$（this）.text（$（this.attr（“类”）==“可见”？“隐藏更多”：“查看更多”）；
$（this.toggleClass（'visible-invisible'）；
$（this.show（）；
})
)           
}
});

---

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

$（“#dl”）。每个（函数（）{
var$dl=$（本）；
var$dd=$（this）.nextUntil（“dt”），$this；
$dd.filter（“：gt（0）”）.hide（）；
如果（$dd.length>1）{
$dd.last（）。在（$（“”）之后。单击（函数（e）{
e、 预防默认值（）；
$dl.sides（）.toggle（）；
$（this）.text（$（this.attr（“类”）==“可见”？“隐藏更多”：“查看更多”）；
$（this.toggleClass（'visible-invisible'）；
$（this.show（）；
})
)           
}
});

---

请检查以下工作代码。我修改了您的代码，而不是我正在使用的类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</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>

<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>

姓名：
我的名字
部门
我的部门
电子邮件
我的电子邮件


姓名：
我的名字
部门
我的部门
电子邮件
我的电子邮件更改1


姓名：
我的名字
部门
我的部门
电子邮件
我的电子邮件变了

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

$（函数（）{
var select=$（'.dl'）；
选择.filter（“：gt（0）”）.hide（）；
如果（select.length>1）{
$（'.dl:last'）。在（$（“”）之后。单击（函数（e）{
e、 预防默认值（）；
$（this）.text（$（this）.text（）==“查看更多”？“隐藏更多”：“查看”
更多“）.prevAll（“dl”）.nextUntil（“dt”）.filter（“：gt（0）：not（'a'）”）。toggle（）
}));
}
});

请检查以下工作代码。我修改了您的代码，而不是我正在使用的类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</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>

<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>

姓名：
我的名字
部门
我的部门
电子邮件
我的电子邮件


姓名：
我的名字
部门
我的部门
电子邮件
我的电子邮件更改1


姓名：
我的名字
部门
我的部门
电子邮件
我的电子邮件变了

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

$（函数（）{
var select=$（'.dl'）；
选择.filter（“：gt（0）”）.hide（）；
如果（select.length>1）{
$（'.dl:last'）。在（$（“”）之后。单击（函数（e）{
e、 预防默认值（）；
$（this）.text（$（this）.text（）==“查看更多”？“隐藏更多”：“查看”
更多“）.prevAll（“dl”）.nextUntil（“dt”）.filter（“：gt（0）：not（'a'）”）。toggle（）
}));
}
});

如果您必须选择，当您单击“查看更多”时，单击“查看更多”时您会选择什么行为显示其余的

元素，在这种情况下，显示其他2个

您不能为多个元素设置相同的id，身份证必须是unique@JoshHarrison一个一个地显示将非常好，可以一个一个地显示，直到显示全部，然后在显示所有内容时显示“隐藏更多”选项如果必须选择，当您单击“查看更多”时，单击“查看更多”时，您更喜欢什么行为在此ca中显示其余的

元素