HTML5詳細信息 - >摘要

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

您可以添加的jQuery到您的通過添加鏈接到thei的這個標籤頁在提到的代碼之前的CDN。

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