0

これは基本的に次のような状況です。

http://jsfiddle.net/thomascs/CfGYG/1/

さまざまなボタンをクリックするとさまざまに読み込まれる iframe があります。しかし、これらのボタンはすべて同じ iframe を切り替えていますが、一番上のボタンだけが機能しています。

また、アニメーションでiframeのトグルを解除してから、すでに開いているときに再度トグルするようにしたいと思いますが、新しいリンクがクリックされました。

HTML:

<div id="wrapper">
    <div id="left">LINKSSSSS</div>
    <div id="menu"> 
        <span class="button" id="leftbutton">open left</span>
        <span class="button" id="rightbutton">open right1</span>
        <span class="button" id="rightbutton">open right2</span>
        <span class="button" id="rightbutton">open right3</span>
    </div>
    <div id="right">RECHTSSSS</div>
</div>

CSS:

    #menu {
    background:#eee;
    width:300px;
    height:400px;
    float:left;
}
#left {
    float:left;
    display:none;
}
#right {
    float:left;
    display:none;
}

JS:

$(document).ready(function () {
    $('#leftbutton').click(function () {
        $('#right').hide();
        $('#left').toggle();
    });
});
$(document).ready(function () {
    $('#rightbutton').click(function () {
        $('#left').hide();
        $('#right').toggle();
    });
});

！編集！

そのため、クラス セレクターではなく ID の問題は解決されました。また、リトグル アニメーションを実現することもできました。同じリンクを 2 回クリックしたときにトグル機能を元に戻す必要があるだけです。

今のところ：http://jsfiddle.net/thomascs/CfGYG/6/

4

2 に答える 2

4

属性id=""はユニークです。class=""代わりに使用

再切り替え:

于 2013-01-23T02:20:54.167 に答える
0

クラスではなく ID を使用しているため、ボタンが起動していないようです。ID はページごとに一意です。これが、最初の OPEN RIGHT ボタンのみが作動し、他の 2 つのボタンが作動しない理由です。何度も再利用されるナビゲーション メニュー項目のようなものには、クラス名を使用する必要があります。

IDS ではなく「rightbutton」と「leftbutton」をクラスとして使用するようにコードを変更しましたが、期待どおりに動作しているようです。

変化する <span class="button" id="rightbutton">open right1</span>

に <span class="button rightbutton">open right1</span>

と

<span class="button" id="leftbutton">open left</span>

に

<span class="button leftbutton">open right1</span>

以下の動作デモを参照してください。

http://jsfiddle.net/bNVkG/

これにはフェード効果があります。トグル()をfadeIn()とfadeOut()に置き換えました:

http://jsfiddle.net/HcRSm/

于 2013-01-23T02:33:57.403 に答える