jquery hide（）和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'）。点击（function（）只工作一次吗？

<a href="#" id="AddCityA">Add City</a> 

<div id="AddCity">
    here some code
</div>

感谢您的帮助

Answer 1

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

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

FIDDLE

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

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