jquery hide() and slideDown()

Question

$(document).ready(function(){
 $('#AddCity').hide();
 $('#AddCityA').click(function(){
     if ( AddCityVar==1 ){
         $('#AddCity').hide();
         var AddCityVar=0;
     }else{
           $('#AddCity').slideDown("slow");
           var AddCityVar=1;
     }
  });

我无法弄清楚这一点，为什么 ID #AddCity 的div 在第一次单击链接时打开 #AddCityA 但在第二次单击时永远不会隐藏？$('#AddCityA'(.click(function(( 只工作一次吗？

<a href="#" id="AddCityA">Add City</a> 
<div id="AddCity">
    here some code
</div>

感谢您的任何帮助

Answer 1

每次为它分配一些值时，您似乎都会重新初始化AddCityVar。您需要将其置于单击功能的范围之外：

$(document).ready(function(){
    $('#AddCity').hide();
    var AddCityVar= 0;
    $('#AddCityA').click(function(){
      if ( AddCityVar==1 ) {
         $('#AddCity').hide();
         AddCityVar=0;
      }
      else {
         $('#AddCity').slideDown("slow");
         AddCityVar=1;
      }
    });
 });

但是，正如烤制所提到的，它不需要有一个变量来做到这一点。你可以只使用slideToggle：

$('#AddCityA').click(function () {
  $('#AddCity').slideToggle("slow");
});

演示 ： http://jsfiddle.net/hungerpain/9cdKL/

Answer 2

您可以检查该元素是否可见：

$(document).ready(function () {
    $('#AddCity').hide();
    $('#AddCityA').click(function () {
        var state = $('#AddCity').is(':visible');
        $('#AddCity')[state?'hide':'slideDown'](state ? 0 : 'slow');
    });
});

小提琴

对于更简单的方法，您可以双向滑动元素：

    $('#AddCity').hide();
    $('#AddCityA').on('click', function () {
        $('#AddCity').slideToggle('slow');
    });