Jquery hide() / show()在窗口宽度上

Question

嗨，伙计们，如果这是在一定的窗口宽度上运行代码的正确方式，请告知。

$(window).resize(function(){
var width = $(window).width();
if(width <= 780){
  jQuery(".answers").hide();
  jQuery(".container h4").click(function(){
    jQuery(this).next(".answers").siblings(".answers:visible").slideToggle();
    jQuery(this).next(".answers").slideToggle();
  });
}

else{
    jQuery(".answers").show();
}
})

如果我点击这个问题，宽度大于700 if。整件事一直在摇晃。请告知- Jsfiddle链接https://jsfiddle.net/bw6k874b/28/

Answer 1

您只需查看jQuery(".answers").is(':hidden')是否已经隐藏了.answers。

$(window).resize(function() {
var width = $(window).width();
if (width <= 780) {
    if (jQuery(".answers").is(':hidden')) return; // This is the fix
    jQuery(".answers").hide();
    jQuery(".container h4").click(function() {
        jQuery(this).next(".answers").siblings(".answers:visible").slideToggle();
        jQuery(this).next(".answers").slideToggle();
    });
} else {
    jQuery(".answers").show();
}
})

这是你的，没有晃动：https://jsfiddle.net/e4g4a4m2