0

jquery の経験者にとってはそれほど難しい問題ではないと思いますが、残念ながら私はそうではありません。私は周りを検索し、同様の問題をいくつか見つけましたが、言及された解決策の点をつなぐことができませんでした.

<div id="Top">
 <p>Lorem ipsum dolor</p>
 <ul class="links">
  <li class="one"><a href="#">One</a></li>
  <li class="two"><a href="#">Two</a></li>
  <li class="three"><a href="#">Three</a></li>
 </ul>      
</div>

<div id="one">
 <p>Lorem ipsum</p>
</div>
<div id="two">
 <p>Lorem ipsum</p>
</div>
<div id="three">
 <p>Lorem ipsum</p>
</div>

だから、私は「トップ」と呼ばれる div を持っています。その div の下部に、1、2、3 の 3 つのリンクを表示しています。その div の下には、他の 3 つの div があり、すべて表示されています。対応するリンクの 1 つがクリックされた場合に、それらの div を表示したいと考えています。しかし、開いているものが閉じられた後にのみdivを表示したいです。この時点で一方が閉じ、もう一方が開いています。

いろいろ試してみましたが、どれもうまくいきませんでした。誰かが私が理解できる解決策を手伝ってくれることを願っています!

初心者として、私はおそらく間違ったルートを取りますが、とにかく、私が試したこと:

$("li.one a").click(function(event){
    event.preventDefault();
    $("#one").slideToggle( "slow", function(){
        $("#two, #three").slideUp( "slow" );
    });
});

これは、li.one a のみです。li.two a と li.three a も同様です。

そして、私はこのように試しました：

$("li.een a").click(function(event){
    event.preventDefault();

    if( $( "#een" ).hasClass( "open" ) ) {
        $("#een").slideUp( "slow" ).removeClass("open");
    }
    else {
        $("#een").slideDown( "slow" ).addClass("open");
    };

});

わかりました、私はギャルの答えを見て、これを作りました:

$("li.one a").click(function(event){
    event.preventDefault();
    $('#two').slideUp(function(){
        $('#one').slideToggle();
    });
});

そして、私はこれらを入れて、2つと3つがスライドして開くことができるようにしました

$("li.two a").click(function(event){
    event.preventDefault();
    $("#two").slideToggle( "slow" );
});

$("li.three a").click(function(event){
    event.preventDefault();
    $("#three").slideToggle( "slow" );
});

そしてそれは部分的に機能します！One と Two は、slideToggle できます。Two が開いていて One がクリックされている場合、Two は閉じ、終了すると One SlideToggles が開きます。

そして、これはそれがうまくいかなくなる場所です...

これ

$('#two').slideUp(function(){

#two のみをスライドさせますが、#three が開いている場合、li.one a をクリックしても閉じません。

私は試した

$('#two, #tree').slideUp(function(){

しかし、それは間違った振る舞いをします。

$("li.one a").click(function(event){
    event.preventDefault();
    $('#two').slideUp(function(){
        $('#one').slideToggle();
    });
});
4

1 に答える 1

0

jQuery のアニメーション コールバックを使用します。

$('#element1').slideUp(function(){
    $('#element2').slideDown();
});

それが役に立ったことを願っています。

于 2013-10-17T10:49:46.010 に答える