2017-10-23 10 views
1

なぜこのことはうまくいかないのですか?コンテンツを表示するにはdivをダブルクリックする必要があります。 。私はそれが非表示になるとtoggle1 divの上でクリックしたときうーん、多分あなたのボタンが最初に重点を置いていないetc.thanks、コンテンツを表示して表示するにはdivをクリックしてください。

var button = document.getElementById('toggle1'); // Assumes element with id='button' 
 

 
button.onclick = function() { 
 
    var div = document.getElementById('newpost'); 
 
    if (div.style.display !== 'none') { 
 
    div.style.display = 'none'; 
 
    } else { 
 
    div.style.display = 'block'; 
 
    } 
 

 
}; 
 

 
var button = document.getElementById('toggle2'); // Assumes element with id='button' 
 

 
button.onclick = function() { 
 
    var div = document.getElementById('newpost1'); 
 
    if (div.style.display !== 'none') { 
 
    div.style.display = 'none'; 
 
    } else { 
 
    div.style.display = 'block'; 
 
    } 
 
};
<nav> 
 
    <ul> 
 
    <li id="toggle1">Home</li> 
 

 
    <div id="newpost" class="post"> 
 
     <p>Lorem iporem ipsum dolor sit amet, consectetur adipisicing elit. Omnis id, dolorem dolores obcaecati, repellat quamorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis id, dolorem dolores obcaecati, repellat quamsum dolor sit amet, consectetur 
 
     adipisicing elit. Omnis id, dolorem dolores obcaecati, repellat quam!</p> 
 
    </div> 
 

 
    <li id="toggle2">Contact</li> 
 
    </ul> 
 
</nav> 
 

 

 

 

 
<div id="newpost" class="post"> 
 
    <p>Lorem ipsum ble ble at quam!</p> 
 
</div> 
 

 
<br> 
 

 

 
<div id="newpost1" class="post"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis id, dolorem dolores obcaecati, repellat quam!</p> 
 
</div>

+4

それは良い作品> https://jsfiddle.net/u1ufcpaj/。スクリプトはそれほど正確ではありません(これを行うための簡単で簡潔な方法があります)。また、同じIDの 'newpost'を持つ2つのdivがあります。なぜあなたはそれをしたのか分かりませんが、それは正しくありません。 –

+1

あなたのコードを 'jsfiddle'にコピー&ペーストして、うまく動作し、常にdivを表示/非表示にします。どのようにそれをテストしていますか?おそらく、あなたがid(許可されていない)として2つの "newpost"を持っているという事実は、いくつかの問題を引き起こす可能性があります。 IDの重複を避け、代わりにクラスを使用します。 –

+0

うまく動作し、同じIDを1ページに2回使用しないでください。 –

答えて

2

を#newpost divのを示したいと思います。最初の行を追加してみてください:私のために

document.querySelector('nav').focus(); 
 

 
var button = document.getElementById('toggle1'); // Assumes element with id='button' 
 

 
button.onclick = function() { 
 
    var div = document.getElementById('newpost'); 
 
    if (div.style.display !== 'none') { 
 
    div.style.display = 'none'; 
 
    } else { 
 
    div.style.display = 'block'; 
 
    } 
 

 
}; 
 

 
var button = document.getElementById('toggle2'); // Assumes element with id='button' 
 

 
button.onclick = function() { 
 
    var div = document.getElementById('newpost1'); 
 
    if (div.style.display !== 'none') { 
 
    div.style.display = 'none'; 
 
    } else { 
 
    div.style.display = 'block'; 
 
    } 
 
};
<nav> 
 
    <ul> 
 
    <li id="toggle1">Home</li> 
 

 
    <div id="newpost" class="post"> 
 
     <p>Lorem iporem ipsum dolor sit amet, consectetur adipisicing elit. Omnis id, dolorem dolores obcaecati, repellat quamorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis id, dolorem dolores obcaecati, repellat quamsum dolor sit amet, consectetur 
 
     adipisicing elit. Omnis id, dolorem dolores obcaecati, repellat quam!</p> 
 
    </div> 
 

 
    <li id="toggle2">Contact</li> 
 
    </ul> 
 
</nav> 
 

 

 

 

 
<div id="newpost" class="post"> 
 
    <p>Lorem ipsum ble ble at quam!</p> 
 
</div> 
 

 
<br> 
 

 

 
<div id="newpost1" class="post"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis id, dolorem dolores obcaecati, repellat quam!</p> 
 
</div>

関連する問題