Question

我制作了这个小jQuery函数，让我的导航在移动设备上滑出。我唯一的问题是......我只能展示和隐藏一次......任何人都可以帮我解决这个问题吗？提前谢谢！

$('#menu-btn').click(function(){

  if ($('nav ul').css('margin') == '83px 0px 0px -225px') {

    $('nav ul').animate({
      margin:'83px 0px 0px 0px'
    }, 200);

  }
  else {

    $('nav ul').animate({
      margin:'83px 0px 0px -255px'
    }, 200);

  }

});

Answer 1

作为替代解决方案，您可以遵循以下方式：

您可以在每次点击时切换带边距的类，而不是字符串比较

$('#menu-btn').click(function() {
    $('nav ul').toggleClass('slided')    
})

您还需要2个CSS规则

nav ul {
    margin: 83px 0px 0px 0px
}

nav ul.slided {
    margin: 83px 0px 0px -225px
}

Answer 2

var flag=true;
$(function(){
    $('#menu-btn').click(function(){      
        var newMargin = flag===true ? '83px 0px 0px -225px' : '83px 0px 0px 0px';
        $('nav ul').animate({
           margin: newMargin // toggle margin according to flag
        }, 200);
        flag = !flag;//toggle flag
    });
});

nav ul {
    margin: 83px 0px 0px 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
    <ul>
        <li>List 1</li>
        <li>List 2</li>
        <li>List 3</li>
        <li>List 4</li>
        <li>List 5</li>
    </ul>
</nav>
<br/>
<button id="menu-btn">Click</button>

试试这个，

var flag=true;

$(function() {
    $('#menu-btn').click(function() {      
        var newMargin = flag==true ? '83px 0px 0px -225px' : '83px 0px 0px 0px';

        $('nav ul').animate({
           margin: newMargin //toggle margin according to flag
        }, 200);

        flag = !flag; //toggle flag
    });
});

Answer 3

或者你可以试试这个 -

$('#menu-btn').click(function(){
    if ($('nav ul').css('margin-left') == '225px') {
        $('nav ul').animate({
          margin:'83px 0px 0px 0px'
        }, 200);
    } else {
        $('nav ul').animate({
            margin:'83px 0px 0px 225px'
        }, 200);
    }
});

您的代码问题在于您试图获取保证金的速记属性，根据jQuery的文档，该保证不起作用 -

无法保证检索速记CSS属性（例如，边距，背景，边框），虽然可以在某些浏览器中使用。

功能只运行一次

3 个答案: