web-dev-qa-db-ja.com

Javascript：トグルボタンでdivタグを表示および非表示にする

私はそれに正解します：

私がする必要があるのは、ボタンを押すだけで特定のdivを非表示にすることです。これはトグルであるはずなので、基本的には、1回押すと非表示になり、もう一度押すと表示され、もう一度押すと非表示になります。

非表示/表示ルールをCSSで実行し、相互作用を純粋なjavascriptで実行する必要があります（jqueryは使用しないでください）。これが私がしなければならないことですが、javascriptコードを実行する方法がよくわかりません。

html：

<p class="button">Show/hide<p>

<div> I want to hide this by pressing the button above</div>

css：

#showhide {
     display: none;
}

.button {
    display: block;
    height: 30px;
    width: 100px;
    background: green;
    text-align: center;
    padding-top: 10px;
    padding-left: 0px;
    font: 15px arial bold;
    border: 1px solid black;
    text-decoration: none;
    list-style:none;
    margin: 10px 0px 10px 0px;
}

http://jsfiddle.net/fyUJc/14/

また、この質問がここに属していない、または愚かであると思われる場合は、失礼なことは控えてください。私はここで学習しようとしています。

javascriptcsstogglehideshow
3
Andrew P

onclickメソッドを使用できます。 HTMLを次のようにします。

<p class="button" onclick="toggle_visibility('hideMe')">Show/hide</p>
<div id="hideMe">I want to hide this by pressing the button above</div>

そして、次のJavaScriptがあります。

function toggle_visibility(id) 
{
    var e = document.getElementById(id);
    if (e.style.display == 'block' || e.style.display=='')
    {
        e.style.display = 'none';
    }
    else 
    {
        e.style.display = 'block';
    }
}

[〜＃〜]デモ[〜＃〜]

13
tomsullivan1989

HTMLタグ内で「onclick」属性を使用するだけの代替ソリューション：

<!DOCTYPE html>
    <html>
        <head>
           <script>
               function toggle(){
                   var div = document.getElementById("divSection");
                   if (div.style.display =='block'){
                       div.style.display = 'none';
                       return;
                   }
                   div.style.display ='block';
             }
           </script>
        </head>

        <body>
            <p>Click the button to trigger a function.</p>
            <p class="button" onclick="toggle()">Show/hide</p>
            <div id='divSection'> I want to hide this by pressing the button above</div>
        </body>
    </html>

お役に立てば幸いです。

2
Alberto Montellano

これは、ネイティブブラウザメソッドで動作し、単純なトグルコンポーネントを実装するコードの更新されたJSFiddleです http://jsfiddle.net/fyUJc/31/

var button = document.querySelector('.button');
button.addEventListener('click', function(event) {
    var target = document.querySelector(button.getAttribute('data-target'));
    if (target.style.display == "none") {
        target.style.display = "block";
        button.innerHTML = button.getAttribute('data-shown-text');
    } else {
        target.style.display = "none";
        button.innerHTML = button.getAttribute('data-hidden-text');
    }
});

トグルボタンを作成すると、GUIのフィールドに入りますが、これは非常に複雑です。

現在のブラウザテクノロジは、GUIで処理する必要があるすべてのことを支援する豊富なツールセットを提供していません。 GUIは、DOMの操作よりもコンポーネントと状態の処理に重点を置いているため、jQueryも役に立ちません。

上記のコードがChromeで機能する場合でも、DOMとイベントの両方でブラウザーの違いに注意する必要があり、コンポーネントのより良い抽象化が必要になります。私のコードでは対処されていない問題がかなりたくさんあり、毎回最初から書くと正しく対処するのが非常に困難になります。のようなもの：

  • ページに新しく追加されたトグルをどのように初期化しますか？
  • Divとボタンの状態をどのように同期しますか？
  • ボタンの動作をどのように拡張してプラグインしますか？

一般的な問題の解決策を提供するUI関連のライブラリまたはフレームワークを調べることを強くお勧めします。いくつか例を挙げると、ReactJS、Dojo、またはSencha（ExtJSなど）を参照してください。ウィジェット/コンポーネントのライフサイクルを定義するフレームワークと、カスタムのライフサイクルを拡張および定義する方法を探します。

ブラウザテクノロジは、UIコンポーネントを作成するための適切な抽象化を提供しません。

2
edzhelyov

以下に示すように、イベントリスナーをPタグに追加し、Toggle()関数を呼び出して表示値を交換することができます。

ここでの例- JSFiddle

function Toggle() {
    var div = document.getElementsByTagName('div')[0];

    if (div.style.display == 'none') {
        div.style.display = 'block';
    } else {
        div.style.display = 'none';
    }
}

(function () {

    var button = document.querySelectorAll(".button");

    for (var i = 0; i < button.length; i++) {
        if (button[i].addEventListener) {
            button[i].addEventListener("click", function () {
                Toggle();
            });
        } else {
            button[i].attachEvent("click", function () {
                Toggle();
            });
        }
    }
})();

ただし、要素を参照しやすくするために、要素にIDsを追加することをお勧めします。

0
Jonathan