Question

我正在尝试更改导航按钮内的汉堡包图标，当我第一次点击它时，它将是一个使用变换的右图标，然后在第二次点击后它将显示导航菜单。在jquery中这可能吗？我所能做的就是当你将汉堡包菜单悬停时它会转换为正确的图标，但我想要的是当它点击它会改变图标然后第二次点击将转到链接。

这是我的悬停代码

button#responsive-menu-button:hover .responsive-menu-inner { 
background:rgba(0,0,0,0) !important;}
button#responsive-menu-button:hover .responsive-menu-inner:before { transform:rotate(45deg);}
button#responsive-menu-button:hover .responsive-menu-inner:after { transform:rotate(-45deg);}

Answer 1

看看这个fiddle click here，我用更改

更新它

因为你正在改变＆＃34; .before和.after＆＃34;使用jquery，最好的方法是创建一个类并添加它。

Css更改

.transformCL_1:before{
                transform:rotate(45deg);
            }
            .transformCL_1:after{
                transform:rotate(-45deg);
            }

Javascript功能更改

function viewSomething() {

                if (action == 1) {
                    $(".responsive-menu-inner").css("background", "rgba(0,0,0,0)");
                    $(".responsive-menu-inner").addClass('transformCL_1');

                    action = 2;
                } else {
                    $(".responsive-menu-inner").removeClass('transformCL_1');
                    /*will show the navigation menu and the icon will be left */
                    action = 1;
                }
            }

希望这有帮助

Answer 2

您可以使用jQuery的one() method

例如，如下：

$('button').one('click', doThis);

function doThis() {
    alert('doing this');
  $('button').one('click', doThat);
}

function doThat() {
    alert('doing that');
  $('button').one('click', doThis);
}

此代码段将使用一次性功能初始化按钮。每次单击该按钮，它将执行交替功能。这是你的jsfiddle编辑来展示这个：

https://jsfiddle.net/0uc8o0nL/4/

如何进行第一次单击按钮图标将更改，第二次单击它将转到页面

2 个答案: