jquery - 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每次为它分配一些值时，您似乎都在重新初始化。您需要将其置于 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');
    });
});

小提琴

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

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