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

FIDDLE

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

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