0

CSSを使用して、「tidy」というDIVをinvisibleおよびwidth0pxに設定しました。

<div id='tidy'>Test div I am hidden</div>

ページを明るくするためにjavascriptだけを使用しようとしているため、jqueryを使用できません。

クリックするとdivが再び表示され、幅がxxxpxに設定されるリンクを作成するにはどうすればよいですか？

4

4 に答える 4

3

非表示に表示スタイルを使用し、ページのスペースを占有しません。

var node = document.getElementById("tidy");

function hideTidy() {
    node.style.display = "none";
}

function showTidy() {
    node.style.display = "";
}

簡単なトグルを追加します。

var tidyVisible = true;

function toggleTidy() {
    (tidyVisible ? hideTidy : showTidy)();
    tidyVisible = !tidyVisible;
}
于 2012-10-05T13:28:09.710 に答える
1

次のようなリンクがあると想像してみましょう。

<a href="#" id="tidy_toggle">click to display hidden element</a>

あなたはそれをこのように使うことができます：

var toggler = document.getElementById('tidy_toggle');
var tidy = document.getElementById('tidy');
toggler.onclick = function(event) {
    event.preventDefault();
    tidy.style.display = 'block';
    tidy.style.width = 'xxxpx';
}
于 2012-10-05T13:26:53.603 に答える
0 
document.getElementById('tidy').style.visibility = 'visible';
于 2012-10-05T13:26:45.767 に答える
0

こちらのデモをご覧ください 

function makevisible() {
     var tidy = document.getElementById("tidy");
     tidy.style.display= 'block';
     tidy.style.width = '100px';    
}  ​
于 2012-10-05T13:27:56.300 に答える