Question

这里非常基本的问题。

我正在使用HTML5的DETAILS，我想知道只要点击它就可以更改摘要。

...即

摘要显示“显示更多”，但我想知道是否有办法让它在点击后显示“显示更少”并显示详细信息。

<details>
   <summary>Show more</summary>
   <p>Content></p>
</details>

Answer 1

不是简单的HTML，而是JavaScript（JQuery）

$('summary').click(function(){
   if($(this).text() === 'Show more' ){
      $(this).text('Show less');
   }else{
      $(this).text('Show more');
   }
});

您可以通过在上述代码之前添加链接到其CDN的标记，将jquery添加到您的页面。

<script src="http://codeorigin.jquery.com/jquery-2.0.3.min.js"></script>

Answer 2

使用jquery

尝试此操作

var clicked=false;
    $("summary").click(function(){
    if(!clicked){
   clicked=true;
    this.html("show less");
    }else{
   clicked=false;
   this.html("show more");
   }
    });

没有jquery

       var clicked=false;
        var a=document.getElementsByTagName('summary')[0];
        a.addEventListener('click',function(){
        if(!clicked){
        clicked=true;
        a.innerHTML="show less";
       }   else{
   clicked=false;
        a.innerHTML="show more";
        }
        },false);

HTML5详情 - ＆gt;摘要

2 个答案: