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

我想不出来为什么在第一次点击 #AddCityA 链接时 ID为 #AddCity 的 div 会打开，但在第二次点击时却无法隐藏。难道 $('#AddCityA').click(function() 只能执行一次吗？

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

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

感谢您的任何帮助。

- Shirker

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

但是，就像 @roasted 提到的那样，你不需要使用变量来完成这个操作。你可以直接使用 slideToggle 。

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

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

- krishwader

---

+1 但是 AddCityVar 不需要在全局范围内，顺便说一下，在你的示例中它并不是。 - A. Wolff

@passionateCoder 非常感谢！是的，这个可以工作。 - Shirker

@user2437063：很高兴能帮助到你。如果你认为这对你有帮助，请务必将其标记为正确答案 :) - krishwader

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

- adeneo

---

我希望我能为此投票。这个也很好用。谢谢。 - Shirker