2012-07-08 4 views
0

다음 코드는 있지만 아래로 내려 가면됩니다. 제발, 당신은 내가 실수를 찾을 수 있도록 도울 수 있다면 어쩌면 거기에 더 좋은 방법이있다, 나는 slideToggle을 시도했지만 요소의 상태를 확인하는 것이 가능하지 않다. $('#my_div').is(':hidden')을 확인하십시오. 하면 "대신 .removeClass 호출에"#advanced_search_box "를 변경해야동일한 링크가 작동하지 않는 상태에서 Jquery 슬라이딩 요소가 작동하지 않습니다.

$("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; 
}); 

기본적으로 내가 폐쇄의 클래스를 추가 있습니다

답변

0

요소 대신 링크의 특성을 수정하려고합니다. 또한 객체를 변수에 할당하여 객체를 cache으로 지정하면보다 쉽게 ​​참조 및 최적화 할 수 있습니다. 다음보십시오 :

$("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/

+0

대단히 감사합니다.이 위대한 답변과 데모에 감사드립니다. 내 실수를보고 코드를 더 잘 최적화하는 법을 배웁니다. –

1

#advanced_search_box에 : 여기

내 코드입니다 .advanced_search_toggle ". 확인중인 요소의 클래스 이름을 제거하지 않으므로 위로 이동하지 않고 아래로만 이동합니다.

$("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; 
}); 
+0

감사 숀, 지금 내가 뭘 잘못했는지를 참조하십시오. –

관련 문제