Responsiver Боковое меню

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:

Когда я нажимаю на кнопку (?), Появляется меню. Если я закрою меню и увеличу окно, меню и кнопка исчезнет, ​​и у меня возникнет проблема. Как я могу избежать этого?

Я хотел бы изменить код, чтобы он добавлял новый класс в контейнер меню в зависимости от размера окна, но сохранял функциональность кнопки.

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 одушевленный с ключевым кадром

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

, но в этом случае вы должны добавить другой класс анимировать, чтобы оживить слайд назад, я просто дать вам возможность попробовать (я уверен, что он будет работать)