javascript - Javascript、トグル、スライド

Question

http://jsfiddle.net/Z9zD8/271/

$(function() 
{
    $('#toggle1').click(function() {
        $('.toggle1').toggle();
        return false;
    });

    $('#toggle2').click(function() {
        $('.toggle2').toggle();
        return false;
    });

    $('#toggle3').click(function() {
        $('.toggle3').toggle();
        return false;
    });

    $('#toggle4').click(function() {
        $('.toggle4').toggle();
        return false;
    });

});

私は、スライダーだけを常に開いているようにしたいと思います。説明: Slider 1 を開いています。Slider 2 を開くと、 Slider 1 を閉じます。常にスライダーのみを開く必要があります

あなたが私を助けてくれることを願っています

ありがとうございました

Answer 1

このjqueryコードを使用してください：

フィドルのデモ

$("a[id^='toggle']").click(function(){
      $('div[class^="toggle"]').slideUp(500);
      $("."+$(this).attr("id")).slideToggle(500);        
});

Answer 2

ボックス [.toggle1, .toggle2, .toggle3, ..] は、'.toggle' のようなクラスを 1 つ持つ必要があり、リンク要素の [#toggle1, #toggle2, #toggle3, ..] を削除し、この jQuery コードを試してください。 :

$(function() {
   $('a').on('click', function(e) {
        e.preventDefault();
        $('.toggle').slideUp();
        $(this).next().next().next('.toggle').slideDown();
   });
});

あなたのHTMLコード：

<a href="#">Simple Div Toggle</a><br /><br />
<div class="toggle" style="display:none; background-color:#4CF;width:100px;height:100px;"></div>

<a href="#">Simple Div Toggle</a><br /><br />
<div class="toggle" style="display:none; background-color:#4CF;width:100px;height:100px;"></div>

<a href="#">Simple Div Toggle</a><br /><br />
<div class="toggle" style="display:none; background-color:#4CF;width:100px;height:100px;"></div>

<a href="#">Simple Div Toggle</a><br /><br />
<div class="toggle" style="display:none; background-color:#4CF;width:100px;height:100px;"></div>

Answer 3

次のようなものが必要な場合があります。

ここにリンクの説明を入力

$(function () {
    $(".flyout").siblings("span").click(function () {
        $(".flyout").slideUp(200, function() {
            $(this).siblings(".flyout").toggle(500);
        });
        $(this).siblings(".flyout").toggle(500);
    });
});


<ul>
<li ><span id="europe">Europe</span>
<div class="flyout">
<ul>
<li>item 1</li>
</ul>
</div>
</li>

<li ><span id="europe">Asia</span>
<div class="flyout">
<ul>
<li>item 1</li>
</ul>
</div>
</li>
</ul>

.flyout {display: none}

Answer 4

Jquery UI アコーディオンを見たことがありますか

アコーディオン

この動作が必要だと思います