1

私は jQuery の知識が限られています...2 つのトリガーのいずれかがクリックされたときに切り替えられる単一の div のこの特定のインスタンスについて助けが必要です。現在の問題は、1 つのトリガーが使用されている場合、もう 1 つのトリガーを機能させるには 2 回クリックする必要があることです。

これが私のjQueryです：

jQuery(document).ready(function($) {

    jQuery(".move").toggle(function(){
        jQuery(".contact-container").slideDown('fast'); 
    }, function () {
        jQuery(".contact-container").slideUp('fast');
});

});

私のHTMLはおおよそ次のとおりです。

<div class="contact-container"></div>
<ul>
    <li class="trigger"></li>
</ul>
<a class="trigger"></a>

開発サイトでこれを見たい場合は、ここで見ることができます (トリガーは、右上隅の「連絡先」ボタンとフッターの「連絡先」リンクです):サイト リンク

4

2 に答える 2

2

質問がよくわからないので、WordPress サイトを調べてコードを確認するつもりはありませんが、次のことを試してください。

$(document).ready(function() {
    $(".move").on('click', function(){
        $(".contact-container").slideToggle('fast'); 
    });
});

両方のトリガー要素にクラス「.move」がある場合は正常に動作するはずです。それ以外の場合は、そのクラスを両方のトリガー要素に追加するだけです!

現在機能していない理由は、トグル関数がクラス ".move" を持つ 2 つの異なる要素の状態を追跡しているが、スライドされた ".contact-container" 要素が表示されているかどうかがわからないためです。代わりに slideToggle を使用すると、これが修正されます。

于 2012-07-19T22:19:41.190 に答える
0

まず、フィドル。

これを行うには、 jQuery の.toggle()メソッドを使用できます。必要に応じて、要素を自動的に表示または非表示にします。

click特定の ID ではなく、クラスごとにハンドラーを設定することもできます。そうすれば、そのクラスを持つ要素 (以下の例では を使用) はいつでもtoggle-button、クリック ハンドラー関数が呼び出されます。

更新:上記のサンプル コードに一致するように例を変更しました。

<ul>
    <li class="trigger">Trigger 1</li>
</ul>
<a class="trigger">Trigger 2</a>

<div style="height: 400px; width: 400px; background-color:red;" class="contact-container"></div>

</p> 

$(document).ready(function() {
    $('.trigger').on('click', function(e) {
       e.preventDefault();
        $('.contact-container').slideToggle('fast');
    });
});​
于 2012-07-19T22:21:02.323 に答える