slideToggle works multiple times when watching screen resize-CodePudding

I'm trying to apply the slideToggle function over a menu based on screen size , but this code is applying the function multiple times with just one click , tried every solution here but nothing works .

I know the problem is the click event inside a window resize, but the application should be like that, so please i need alternative solution to have a working code.

$(window).on("resize", function () {
  if (screen.width < 768) {
    $(".part-heading").click(function (e) {
      $(this).next(".sections").slideToggle("slow");
    });
  }
});

CodePudding user response：

You are registering multiple event listeners, one every time the screen size change. And when you click all of them will run. You can change your script as below, so check the size on each click rather than watching the resize:

$(".part-heading").click(function (e) {
  if (screen.width < 768) {
    $(this).next(".sections").slideToggle("slow");
  }
});