jQuery 切换水平动画

Question

我是新来的，所以我希望我做得对。

我目前正在开发一个简单的 jQuery 功能，其中有不同的选项卡可以水平打开。问题是我在切换此功能时遇到问题。

我使用一个名为visible的变量；这是 true 或 false，具体取决于元素的状态。这对于一个元素来说效果很好，但如果我想打开两个元素，我必须双击以首先将值设置为 false，然后才能运行。

你们中有人能为此提供更好的解决方案吗？

   <script type="text/javascript"> 
    var visible=0;
    function getClickedId(clicked_id) {
        var selectedId = clicked_id;
        $(document).ready(function () {

            if (visible ==0) {
                  $('[name='+selectedId+']').animate({width: 300}, "slow");
                  $('#Wrapper'+selectedId).animate({width: 325}, "slow");
                   visible=1;
            } else {
                  $('[name='+selectedId+']').animate({width: 0}, "slow");
                  $('#Wrapper'+selectedId).animate({width: 25}, "slow");
                  visible=0;
            }
        });
    }
    </script>

(抱歉，如果我的代码嵌入不正确)

Answer 1

尝试:

<script type="text/javascript"> 
var visible=0;
function getClickedId(clicked_id) {
    var selectedId = clicked_id;
    if (visible == 0) {
          $('[name='+selectedId+']').animate({width: 300}, "slow");
          $('#Wrapper'+selectedId).animate({width: 325}, "slow");
          visible=1;
    } else {
          $('[name='+selectedId+']').animate({width: 0}, "slow");
          $('#Wrapper'+selectedId).animate({width: 25}, "slow");
          visible=0;
    }
 }
</script>