javascript - JQuery: Event handlers stop working when window is resized -
jsfiddle link: http://jsfiddle.net/4qldc/6
this js code:
var togglecontent = function (event) { $(event.target).siblings().toggle(); }; var showorhidepanels = function () { var windowheight = $(window).height(); var windowwidth = $(window).width(); if (windowwidth < 980) { $(".headbar1").siblings().hide(); $(".headbar1").parent().css("min-height", 0); $(".headbar1").css("cursor", "pointer"); $(".headbar1").on("click", togglecontent); } else { $(".headbar1").siblings().show(); $(".headbar1").parent().removeattr("style"); $(".headbar1").css("cursor", "auto"); $(".headbar1").off("click", togglecontent); } }; $(function () { showorhidepanels(); }); $(window).resize(function () { showorhidepanels(); });
this trying achieve.
when window width less 300px:
- the content box should collapse
- the headings should become links
- when heading clicked, content box should toggle
the first 2 happening, third 1 having trouble with. of time works , of time doesn't (the behaviour unpredictable; in jsfiddle page if try resizing "result" frame 6-7 times, work fine first 6 times fail seventh time). doing wrong? how fix this?
var togglecontent = function (event) { $(event.target).siblings().toggle(); }; var showorhidepanels = function () { var windowheight = $(window).height(); var windowwidth = $(window).width(); $(".headbar1").off("click"); if (windowwidth < 300) { $(".headbar1").siblings().hide(); $(".headbar1").parent().css("min-height", 0); $(".headbar1").css("cursor", "pointer"); $(".headbar1").on("click", togglecontent); } else { $(".headbar1").siblings().show(); $(".headbar1").parent().removeattr("style"); $(".headbar1").css("cursor", "auto"); } }; $(function () { showorhidepanels(); }); $(window).resize(function () { showorhidepanels(); });
is wanted ?
Comments
Post a Comment