Question

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

我目前正在开发一个简单的jQuery功能，我有不同的选项卡，它们将打开水平。问题是我在切换这个问题时遇到了问题。

我使用一个名为visible的变量;根据元素的状态，它是真还是假。这适用于一个元素，但是如果我想打开两个元素，我必须双击才能在运行之前使值为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>

Answer 2

$(document).ready(function () {
    var visible=true;
    function getClickedId(clicked_id) {   
        $('[name="'+clicked_id+'"]').animate({width: visible ? 300 : 0}, "slow");
        $('#Wrapper'+clicked_id).animate({width: visible ? 325 : 25}, "slow");
        visible=!visible;
    }
});

FIDDLE

jQuery切换水平动画

2 个答案: