Question

我对jQuery很新，我想更改以下符合我需求的代码：

  $(document).ready(function() {
  var slider_width = $('.pollSlider').width(); //get width automaticly
  $('#pollSlider-button').click(function() {
    if ($(this).css("margin-right") == slider_width + "px") {
      $('.pollSlider,#pollSlider-button').animate({
        "margin-right": '-=' + slider_width
      });
    } else {
      if (!$(this).is(':animated')) //perevent double click to double margin
      {
        $('.pollSlider,#pollSlider-button').animate({
          "margin-right": '+=' + slider_width
        });
      }
    }   
  });
});

https://jsfiddle.net/3okensLj/1/

它工作安静，但是当我在500px下调整窗口大小时会出现问题：

当我点击按钮（？）时，会出现菜单。如果我关闭菜单并放大窗口，菜单和按钮就消失了，我遇到了问题。我怎么能避免这个？

我想更改代码，它根据窗口大小向Menu容器添加一个新类，但保留了按钮的功能。

Answer 1

抱歉，我不知道如何在不使用js $（窗口）的情况下以更好的方式修复代码.resize

将此添加到您的js

 var pollSlider = $("#sidebar");
$(window).resize(function(){
    if ($(window).width() > 500) {
        if (!pollSlider.hasClass("marginFixed")) {
            $("#sidebar").addClass("marginFixed");
        }
    } else {
        if (pollSlider.hasClass("marginFixed")) {
            $("#sidebar").removeClass("marginFixed");
        }
    }
})

和css

.marginFixed {
   margin-right: 0px !important;
}

你使用js改变你的风格，这是不好的，必须使用！重要的是覆盖这个

它可以正常工作，但错误代码

还有另一种方法，使用css做到这一点

使用过渡

.pollSlider {
    background: #fff none repeat scroll 0 0;
    height: 100%;
    line-height: 20pt;
    position: fixed;
    right: 0;
    top: 0;
    width: 450px;
    margin-right: 0px;
    -webkit-transition: margin-right 1s ease-in;
    transition: margin-right 1s ease-in;
}

.pollSlider.slideAni {
    margin-right: 0px;
}

js

$(document).ready(function () {

  $('#pollSlider-button').click(function () {
      $("#sidebar").toggleClass("slideAni");
 });
});

或使用css animate with keyframe

    .pollSlider {
        background: #fff none repeat scroll 0 0;
        height: 100%;
        line-height: 20pt;
        position: fixed;
        right: 0;
        top: 0;
        width: 450px;
        margin-right: 0px;
        -webkit-animation-duration: 1s;
        animation-duration: 1s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
      }
      .pollSlider.slideAni {
          animation-name: slideAni;
      }
  @-webkit-keyframes slideAni {
      from {
          margin-right: -450px;
      }
      to {
          margin-right: 0px;
      }
  }

  @keyframes slideAni {
      from {
          margin-right: -450px;
      }
      to {
          margin-right: 0px;
      }
  }

js

$(document).ready(function () {

  $('#pollSlider-button').click(function () {
      $("#sidebar").toggleClass("slideAni");
 });
});

但是通过这种方式你必须添加其他动画类来动画回滑动，我给你一个尝试的方法（我确定它会起作用）

响应者边栏菜单

1 个答案: