0

jsfiddle の 1 つのリンクで動作するスクリプトがあります。

私は2つのリンクを持っています。リンク 1 は「リンク 1」、もう 1 つは「リンク 2」です。コードは jsfiddle = http://jsfiddle.net/lamberta/7qGEJ/4/で確認できます。

表示と非表示は機能しますが、一方と他方を表示することはできません。それはすべてを示しています。

リンク 1 を押すと「.open-container-One」が表示され、リンク 2 を押すと「open-container-Two」が表示されます

私の問題を理解していただければ幸いです。

jsコード:

$(document).ready(function() {
    var $div = $('.test');
    var height = $div.height();
    $div.hide().css({
        height: 0
    });

    $('a').click(function() {
        if ($div.is(':visible')) {
            $div.animate({
                height: 0
            }, {
                duration: 500,
                complete: function() {
                    $div.hide();
                }
            });
        } else {
            $div.show().animate({
                height: height
            }, {
                duration: 500
            });
        }

        return false;
    });
});​
4

4 に答える 4

4

クリックされたアンカーからインデックスを取得します。この場合、それはラッピングである必要があります。次に、そのインデックスを使用して、要素liのコレクションから正しいものを選択します。.testjQuery に既に組み込まれている slideUp/Down を再作成する必要はありません。

$(function() {
    var elems = $('.test').hide();

    $('a').click(function(e) {
        e.preventDefault();
        var selEl = elems.eq($(this).closest('li').index());
        selEl.slideToggle(600);
        elems.not(selEl).slideUp(600);
    });
});​

フィドル

于 2012-12-13T06:09:16.190 に答える
0

@adeneoの答えは好きですが、要素よりもセレクターを使用するこの方法の方が好きです。 

$(".test").hide();
$('.list a').each(function(i) {
    $(this).on("click", function() {
        $(".test").slideUp(0).eq(i).slideDown(400, function() {
            $(".close a").on("click", function() {
                $(".test").slideUp();
            }); // on click close
        }); // after slideDown (shown div)
    }); // on click link
}); // each

唯一の条件は、表示される数と同じ数のリンク（リストアイテム）divが同じ順序で存在する必要があることです。

JSFIDDLEを参照してください

于 2012-12-13T06:27:32.420 に答える
0

アンカータグにクラスを付与し、

<a href="#" class="link1">Link 01</a>
 <a href="#" class="link2">Link 02</a>

適切なクラスを id として div タグに指定します

<div id="link1" class="test">
...
...
</div>

<div id="link2" class="test">
...
...
</div>

JavaScript関数で以下の変更を行います

$('a').click(function() {

         $('div.test').hide();
        var showDivClass = $(this).attr("class");
        $("#" + showDivClass).show().animate({
                height: height
            }, {
                duration: 500
            });
        $('div.test').not("#" + showDivClass).hide().animate({
                height: 0
            }, {
                duration: 500
            });

    });

更新してテストします。

于 2012-12-13T06:13:53.110 に答える
-1

表示/非表示に必要なクラスと同じアンカー タグに ID を指定してください。$div を id タグに置き換えます

于 2012-12-13T06:01:30.647 に答える