0

次のコードがあります。下にスライドしますが、上にはスライドしません。エラーを見つけるのを手伝ってください。また、これを行うためのより良い方法がある場合は、slideToggle を試しましたが、要素の状態を確認することはできません。hide と show を使用できる場所チェック$('#my_div').is(':hidden')。

これが私のコードです：

$("a.advanced_search_toggle").click(function() { 
    if ($("#advanced_search_box").hasClass('closed')) {
        $("#advanced_search_box").slideDown(function(){
            $("a.advanced_search_toggle").text('Simple Search');
            $("a.advanced_search_toggle").removeClass('down_arrow');
            $("a.advanced_search_toggle").addClass('up_arrow')
            $("a.advanced_search_toggle").removeClass('closed');
            $("a.advanced_search_toggle").addClass('open'); 
        });
    } else {
        $("#advanced_search_box").slideUp(function(){
            $("a.advanced_search_toggle").text('Advanced Search');
            $("a.advanced_search_toggle").removeClass('up_arrow');
            $("a.advanced_search_toggle").addClass('down_arrow');
            $("a.advanced_search_toggle").removeClass('open');
            $("a.advanced_search_toggle").addClass('closed');                       
        });         
    }
    return false;
});

デフォルトでは、クローズドのクラスを追加することに注意してください#advanced_search_box

4

2 に答える 2

1

.removeClass 呼び出しを「a.advanced_search_toggle」ではなく「#advanced_search_box」に変更する必要があります。チェックしている要素のクラス名を削除していないため、上にスライドせず、下にスライドするだけです。

$("a.advanced_search_toggle").click(function() { 
    if ($("#advanced_search_box").hasClass('closed')) {
        $("#advanced_search_box").slideDown(function(){
            $("a.advanced_search_toggle").text('Simple Search');
            $("a.advanced_search_toggle").removeClass('down_arrow');
            $("a.advanced_search_toggle").addClass('up_arrow')
            $(this).removeClass('closed');
            $(this).addClass('open'); 
        });
    } else {
        $("#advanced_search_box").slideUp(function(){
            $("a.advanced_search_toggle").text('Advanced Search');
            $("a.advanced_search_toggle").removeClass('up_arrow');
            $("a.advanced_search_toggle").addClass('down_arrow');
            $(this).removeClass('open');
            $(this).addClass('closed');                       
        });         
    }
    return false;
});
于 2012-07-08T17:47:20.267 に答える
0

要素ではなくリンクの属性を変更しようとしています。さらに、オブジェクトを変数に割り当ててオブジェクトをキャッシュします。これにより、参照と最適化が簡単になります。次のことを試してください。

$("a.advanced_search_toggle").click(function() {
    var link = $(this);
    var box = $("#advanced_search_box");
    if (box.hasClass('closed')) {
        box.slideDown(function(){
            link.text('Simple Search').removeClass('down_arrow').addClass('up_arrow');
            box.removeClass('closed').addClass('open');
        });
    } else {
        box.slideUp(function(){
            link.text('Advanced Search').removeClass('up_arrow').addClass('down_arrow');
            box.removeClass('open').addClass('closed');                    
        });         
    }
    return false;
});

デモ: http://jsfiddle.net/m9XMn/

于 2012-07-08T17:56:43.500 に答える