响应式侧边栏菜单

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/

它运行良好，但当我将 window 调整到 500 像素以下时出现问题：

当我点击按钮 (?) 时，菜单出现。如果我关闭菜单并放大 window 菜单并且按钮消失了，我遇到了问题。我怎样才能避免这种情况？

我想更改代码，它根据 windows 大小向菜单容器添加一个新的 class，但保持按钮的功能。

Answer 1

抱歉，我不知道如何在不使用 js 的情况下以更好的方式修复您的代码 $(window).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 改变了你的风格，这是不好的，必须使用 !important 来覆盖这个

它可以工作，但它的错误代码

还有另一种方法使用 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关键帧动画

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

但是这样你必须添加其他动画class来动画回滑，我只是给你一个方法来尝试（我相信它会起作用）

响应式侧边栏菜单

Responsiver Sidebar Menu

jquery

menu

sidebar

toggle