スイッチ/トグルDIV（jqueryの）

StackOverflow https://stackoverflow.com/questions/752847

質問

私はかなり単純なタスクを（私は願っています！）

を達成したいです

私はこのように、2個のdivタグと1個のアンカータグを得ます：

<a href="javascript:void(0);">forgot password?</a>
<div id="login-form"></div>
<div id="recover-password" style="display:none;"></div>

私は何を達成したいことは、2個のdivタグ切り替える1を隠し、他の、またはその逆を示すために、アンカータグを使用しています。

これが最善の方法を行うことができますか？

敬具ます。

役に立ちましたか？

解決

1つのdivが最初に隠されているので、あなたは、単に両方のdivのためにトグルに呼び出すことができます：

<a href="javascript:void(0);" id="forgot-password">forgot password?</a>
<div id="login-form">login form</div>

<div id="recover-password" style="display:none;">recover password</div>

<script type="text/javascript">
$(function(){
  $('#forgot-password').click(function(){
     $('#login-form').toggle();
     $('#recover-password').toggle(); 
  });
});
</script>

他のヒント

私はあなたがこれをしたいと思います 

$('#recover-password').show();

または

$('#recover-password').toggle();

これはjQueryのすることによって可能となる。

この情報がお役に立てば幸い...

これはどのように

<script type="text/javascript" language="javascript">
    $("#toggle").click(function() { $("#login-form, #recover-password").toggle(); });
</script>

あなたのHTMLの場合は、のように見えます 

<a id="toggle" href="javascript:void(0);">forgot password?</a>
<div id="login-form"></div>
<div id="recover-password" style="display:none;"></div>

ねえ、大丈夫！一行！私は3のjQueryを<ます。

あなたはこれを行うには、単純なjQueryプラグインを書くことができます。プラグインは次のようになります：

(function($) {
$.fn.expandcollapse = function() {
    return this.each(function() {
        obj = $(this);
        switch (obj.css("display")) {
            case "block":
                displayValue = "none";
                break;

            case "none":                    
            default:
                displayValue = "block";
        }

        obj.css("display", displayValue);
    });
};

}（jQueryの））;

そして、アンカータグのクリックイベントまでのプラグインを配線します：

$(document).ready(function() {
    $("#mylink").click(function() {
        $("div").expandcollapse();
    });
});

あなたは、それぞれが、それぞれ「ブロック」と「なし」であるとDIVリンクがクリックされたときに、彼らは隠された/示されているに切り替える必要があるため、最初の「ディスプレイ」は属性を設定することを提供します。

こののhttp：//www.webtrickss .COM /ジャバスクリプト/ jqueryの-slidetoggle-申し込みフォーム・アンド・ログインフォーム/ に

私は

これがうまくいくと思います 
$(document).ready(function(){

    //Hide (Collapse) the toggle containers on load
    $(".toggle_container").hide(); 

    //Switch the "Open" and "Close" state per click then slide up/down (depending on open/close state)
    $("h2.trigger").click(function(){
        $(this).toggleClass("active").next().slideToggle("slow");
        return false; //Prevent the browser jump to the link anchor
    });

});

私は新しいJavaScriptを手品ことなく、複数のブロックのためにそれを行うためにこの方法を使用します：

<a href="#" data-toggle="thatblock">Show/Hide Content</a>

<div id="thatblock" style="display: none">
  Here is some description that will appear when we click on the button
</div>

次に、このようなすべての場合のJS部

$(function() {
  $('*[data-toggle]').click(function() {
    $('#'+$(this).attr('data-toggle')).toggle();
    return false;
  });
});

説明ここを

これは私が同時に2つのdiv切り替える方法です 

$('#login-form, #recover-password').toggle();

それは動作します！

function toggling_fields_contact_bank(class_name) {
            jQuery("." + class_name).animate({
                height: 'toggle'
            });
        }
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top