javascript - HTML5 详细信息-> 摘要

Question

这里很基本的问题。

我正在使用 HTML5 的详细信息，我想知道是否可以在单击摘要时更改摘要。

IE...

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

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