1

わかりましたので、ここに私のコードがあります

HTML:

<div id="cta-end"><h1>Modification</h1></div>
<div id="bloc1"></div>
<div id="bloc2"></div>

CSS:

#cta-end
{
    width:100%;
    background-color:red;
    text-align:center;
}

#cta-end:hover
{
    cursor:pointer;
}

#bloc1, #bloc2
{
    width: 100%;
    height: 50px;
    margin: 5px 0;
    display:none;
}

#bloc1{
    background-color:blue;
}
#bloc2{
    background-color:grey;
}

および jQuery :

$(document).ready(function(){


    $('#cta-end').click(function(){   
          $('#cta-end').toggle(function () {
               $('#bloc1').css({"display":"block"});
               $('#bloc2').css({"display":"block"});
            },
               function () {
                  $('#bloc1').css({"display":"none"});
                  $('#bloc2').css({"display":"none"});
               }
               );
         });

   });

私がやろうとしているのは、cta-endクリックすると2つのdivbloc1がbloc2表示され、もう一度クリックcta-endすると何も表示されないということです。私のコードはまったく機能しません。toggle()使用する必要があるため、関数を使用していないと思います。cta-endクリックするたびに2つの機能を切り替えたいだけです..

ここにjsfiddleのコードがあります

ありがとう ！

4

4 に答える 4

2

以下のコードを使用できます。

$(document).ready(function () {
    $('#cta-end').click(function () {
        $('#bloc1, #bloc2').toggle();
        //or $('#bloc1, #bloc2').toggle(1000); for transition effect
    });
});

JSFIDDLE1またJSFIDDLE2

于 2013-04-26T10:45:25.827 に答える
1

関数間の切り替えは jquery 1.7 以上では機能しません。代わりに toggleClass() を使用できます。 http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_html_toggleclass

于 2013-07-25T11:48:54.157 に答える
1

以下のコードを試してください。

$('.target').toggle();

パラメーターなしの .toggle() メソッドは、要素の可視性を切り替えるだけです。

于 2013-04-26T10:43:17.767 に答える