Question

点击＆＃34;查看更多＆＃34;时，我会尝试显示隐藏的<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()
     }));
 }
 });
   });

现在的问题是当我点击＆＃34;查看更多＆＃34;没有任何反应，换句话说，其他2 <dl>元素不会出现。我想要发生的是，当您点击查看更多时，其他<dl>会显示，当您点击隐藏更多时，请隐藏之前隐藏的内容点击显示更多

我可以这样做：逐个展示其余的<dl>元素，或者同时显示其余的<dl>个元素。或者/或者同时隐藏元素或同时隐藏元素。

这是一个JSFiddle

Answer 1

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

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

HTML

<Button x:Uid="btnNoDBConnInfo" BorderBrush="Silver" BorderThickness="1" Background="Silver" Margin="2,0,0,0" Width="22" Height="22"
        Command="{Binding NoDBConnInfoCmd, Mode=OneWay}"
        Visibility="{Binding IsSacadaConnected, Converter={StaticResource InverseBooleanToVisibilityConverter}}"
        attProps:MouseBehaviors.MouseEnter="{Binding MouseEnterDatabaseImgCmd}"
        attProps:MouseBehaviors.MouseLeave="{Binding MouseLeaveDatabaseImgCmd}">
    <Image Source="/MDCT;component/Images/database--exclamation.png" Stretch="None" />
</Button>

CSS

public void ShowDialog(DialogBaseControl dialog)
{
    _layerStack.Add(_parent.Content);
    _parent.Content = dialog;
}

JS

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

Fiddle

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

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

3 个答案: