Hello. There is a page with departing (via burger and swipe) on the left menu

In general, I want the background to be darkened when leaving the menu on the left. I made it so that if you pull out and push the menu with a swipe, then everything is ok. But I can't synchronize this effect with the button. For example, I pulled it with a swipe, and pushed it with a burger or vice versa.

Added such fragment to js code:

$("#shadow_window").toggleClass("shadow");

Tobish when I click on the button I assign a class with transparency to the block mask. But firstly, it only works on pulling out, and secondly, if you first pull out / push in with a swipe, and then try to pull it out using the button, then the fragment does not work.

Taken from here

1 answer 1

for your event handlers to be synchronized, you need to “brush” your code a little.

First of all, you need to add 2 functions that will show and hide your sidebar.

Secondly, in the click event you need to add a check whether the sidebar is open now or not, this is done with the help of hasClass .

Third, in the event handler for the swipeStatus event, swipeStatus can combine two if statements into an if and else if construct

 $(window).ready(function() { function showSidebar() { $(".container").addClass("open-sidebar"); $(".shadow_window").css("opacity", "0.6"); } function hideSidebar() { $(".container").removeClass("open-sidebar"); $(".shadow_window").css("opacity", "0"); } $("[data-toggle]").click(function() { if ($(".container").hasClass("open-sidebar")) { hideSidebar(); } else { showSidebar(); } }); $(".swipe-area").swipe({ swipeStatus: function(event, phase, direction, distance, duration, fingers) { if (phase == "move" && direction == "right") { showSidebar(); } else if (phase == "move" && direction == "left") { hideSidebar(); } return false; } }); });

  • Thanks for the "combed" code! Everything works)) - Niko