Question

我在HTML的正文中有这个代码，它充当了一个显示/隐藏按钮，它通过CSS设置样式。但是我只能选择一次标题按钮，即“阅读更多...”＃34;但是在选择按钮后我希望它改为“少阅读”。这是我正在使用的代码：

<button title="Click to show/hide content" type="button" 
   onclick="if(document.getElementById('spoiler') .style.display=='none')        
   {document.getElementById('spoiler')   
   .style.display=''}else{document.getElementById('spoiler')  
   .style.display='none'}">Read more...
</button>

非常感谢任何帮助，提前谢谢。

Answer 1

尝试：

HTML：

<button title="Click to show/hide content" type="button" onclick="func()" id="but">Read more...</button>
<div id="spoiler" style="display:none">TEXT TEXT TEXT</div>

JS：

   function func(){

           if(document.getElementById('spoiler') .style.display=="none"){
           document.getElementById('spoiler').style.display="block";
           document.getElementById('but').innerHTML="Read less...";
           }
           else{
           document.getElementById('spoiler').style.display='none';
           document.getElementById('but').innerHTML="Read more...";
           }
           }

DEMO

Answer 2

首先，不要将JavaScript内联捆绑为HTML属性。从您的JS脚本而不是HTML中集中查看DOM脚本。

您需要做的事情的本质是每次点击按钮时查询某些内容，并采取相应的行动。例如，扰流区域的可见性。

（注意，您需要为您的按钮添加ID，例如mybutton，以便：）

document.querySelector('#mybutton').addEventListener('click', function() {
    var
    spoiler = document.querySelector('#spoiler'),
    showing = spoiler.style.display != 'none';
    spoiler.style.display = showing ? 'none' : 'block';
    this.textContent = 'Read '+(showing ? 'more' : 'less');
}, false);

因此，点击后，我们会查询display #spoiler样式。如果它显示，我们将其隐藏，如果它被隐藏，我们会显示它，相应地更新按钮文本。

Answer 3

<强> HTML：

<button id="btn" title="Click to show/hide content" type="button" onclick="readmore()">Read More...</button>
<div id="spoiler" style="display:none">spoiler text</div>

<强> JS：

function readmore(){
    var btn = document.getElementById('btn');
    var spoiler = document.getElementById('spoiler');

    if(spoiler.style.display=='none') {
        spoiler.style.display = '';
        btn.innerHTML = "Read Less ...";
    } else {
        spoiler.style.display = 'none';
        btn.innerHTML = "Read More ...";
    }   
}

这是 DEMO at jsFiddle 。

更改按钮HTML的状态

3 个答案: