Question

我正在运行一个显示左侧菜单的功能，我点击了一个按钮。

我需要“menuColapsado（）”函数在第一次单击id =“menu_button”时运行，但该函数在第二次单击时显示html元素。

function myFunctionxxx() {
  var xxx = document.getElementsByTagName("BODY")[0];
  xxx.style.backgroundColor = "red";
}


$(document).ready(function() {
      $('#menu_links').css({
        width: '50px'
      });
      $('.collapse-menu').addClass('hidden');

      $('ul#menu_links li').hover(function() {
        $('span', this).addClass('show');
        $('span', this).removeClass('hidden');
      }, function() {
        $('span', this).addClass('hidden');
        $('span', this).removeClass('show');
      });


      $("#menu_button").click(function() {
        menuColapsado();
      });

      $('a.test').on("click", function(e) {
        $(this).next('ul').toggle();
        e.stopPropagation();
        e.preventDefault();
      });
      // });





      var clic = 1;

      function menuColapsado() {
        if (clic == 1) {
          $('#menu_links').animate({
            width: '50px'
          }, 350);
          clic = clic + 1;
          $('.collapse-menu').removeClass('show');
          $('.collapse-menu').addClass('hidden');

          $('ul#menu_links li').hover(function() {
            $('span', this).addClass('show');
            $('span', this).removeClass('hidden');
          }, function() {
            $('span', this).addClass('hidden');
            $('span', this).removeClass('show');
          });
        } else {
          $('#menu_links').animate({
            width: '200px'
          }, 350);
          clic = 1;
          $('.collapse-menu').addClass('show');
          $('.collapse-menu').removeClass('hidden');

          $('ul#menu_links li').hover(function() {

          }, function() {
            $('span', this).addClass('show');
            $('span', this).removeClass('hidden');
          });
        }
      }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button type="button" id="menu_button" onclick="myFunctionxxx();"></button>

Answer 1

所以，根据我的理解，你有一个按钮，你想在第一次点击时运行一个功能，而在第二次单击时运行另一个功能。

这是一个带有计数器和If语句的简单解决方案：

var timesClicked = 0;

$("#menu_button").click(function() {
timesClicked++;

if (timesClicked>1) {
//run second function
} else {
//run first function
}

})

上面的代码将在每次点击按钮时运行第二个函数。如果您不希望这种情况发生，您可以轻松地更改它以满足您的需求。

如果你想使用每隔3,5,7等等作为第一次点击，每隔4,6,8等等点击一下，你可以更改If语句并使用模数除法：

var timesClicked = 0;

$("#menu_button").click(function() {
timesClicked++;

if (timesClicked%2==0) {
//run second function
} else {
//run first function
}

})

检查模数除法：How can I use modulo operator (%) in javascript?

在第二次点击时运行的功能

1 个答案: