在第二次点击时运行的函数

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
    }
})

检查模除法： 如何在 JavaScript 中使用模运算符 (%)？