同じボタンでコンテンツを追加および削除するJavaScript

Question

ul id="menu"のコンテンツをボタンを使用して<p id="demo"></p>に追加する方法を知っています。しかし、私はそれを削除する（または隠す）、同じボタンで知りませんか？これはドロップダウンのようですが、よりシンプルです。私はこのコンテンツを非表示にするか、またはの逆のアクションを返します。 は、私はちょうど小さな変更if(document.getElementById("demo").innerHTML == ""){を作り、他のdocument.getElementById("demo").innerHTML == ""に

var btn = document.getElementsByTagName("button")[0]; 
 
    btn.addEventListener("click", function() { 
 
    var addInner = document.getElementById("menu").innerHTML; 
 
    document.getElementById("demo").innerHTML = addInner; 
 
    });

<ul id="menu"> 
 
    <li>Contacts</li> 
 
    <li>Services</li> 
 
    <li>Main</li> 
 
</ul> 
 
<button>Click to addInnerContent</button> 
 
<p id="demo"></p>

私のコードここ 先進

Answer 1

でいただきありがとうございます。あなたの要素のデモが以前は空だった場合、それはあなたのコードを行いますが、それがなければ、デモ要素からすべてを削除します。

var btn = document.getElementsByTagName("button")[0]; 
 
    btn.addEventListener("click", function() { 
 
    var addInner = document.getElementById("menu").innerHTML; 
 
    if(document.getElementById("demo").innerHTML == ""){ 
 
    document.getElementById("demo").innerHTML = addInner; 
 
    }else{ 
 
    document.getElementById("demo").innerHTML = ""; 
 
    } 
 
    });

<ul id="menu"> 
 
    <li>Contacts</li> 
 
    <li>Services</li> 
 
    <li>Main</li> 
 
</ul> 
 
<button>Click to addInnerContent</button> 
 
<p id="demo"></p>