jquery - 单击后更改按钮功能？

Question

我点击了一个按钮，我想打开/关闭我的侧边菜单。我这样做了：

$("#middleleftopenclose").click(function() {
     $("#middleleft").css("width", 0);
     $("#middleleftopenclose").css("opacity", 1);
     $("#middleright").css("margin-left", 15);
});

我将如何使相同的按钮也单击打开菜单？

谢谢

Answer 1

作为一个简单的解决方案，您可以使用一个布尔标志来存储侧边栏的当前状态，并在每次单击按钮时对其进行测试。

var sidebarVisible = false;

$("#middleleftopenclose").click(function() {
  if (sidebarVisible){
    // close sidebar
  }else{
    // open sidebar
  }
  // toggle boolean flag each time button is clicked
  sidebarVisible = !sidebarVisible;
});

我看到您实际上是在更改函数中元素的 css 属性...也许最好为每个状态创建具有适当属性的类，并在单击按钮时简单地交换类。梅利伯恩在评论中提到了这一点。

Answer 2

您可以使用 jQuery :visible 选择器来查看侧边菜单是否可见。如果可见则隐藏，如果不可见则显示。

http://api.jquery.com/visible-selector/

$("#middleleftopenclose").click(function() {

     var visible = $("#SIDEMENU").is(":visible");

     if(!visible){

        // NOT VISIBLE - SO SHOW
        $("#middleleft").css("width", 0);
        $("#middleleftopenclose").css("opacity", 1);
        $("#middleright").css("margin-left", 15);

     }else{
        // VISIBLE - SO HIDE IT
        // WRITE YOUR CODE TO HIDE HERE
     }
});

Answer 3

只需将您的 CSS 添加到类中，例如.closedMenuLeft, .closedMenuLeftOpenClose, .closedMenuRight，然后在单击时将其打开和关闭，如下所示：

$("#middleleftopenclose").click(function() {
    $("#middleleft").toggleClass("closedMenuLeft");
    $("#middleleftopenclose").toggleClass("closedMenuLeftOpenClose");
    $("#middleright").toggleClass("closedMenuRight");
})

Answer 4

尽管如此，.toggleClass()这将是完美的方式。它对更复杂的操作缺乏灵活性。

/* Aggregate in one CSS class, .active. */
.active #middleleft { width: 0; }
.active #middleleftopenclose { opacity: 1; }
.active #middleright { margin-left: 15; }

$("#middleleftopenclose").click(function() {
  $("#middle").toggleClass("active");
});

考虑#middle作为这些元素的父节点。

或者，您可以利用该.toggle()事件。（不要误以为.toggle()动画。）

$("#middleleftopenclose").toggle(function() {
   // Show the element!
}, function(){
   // Hide the element!
});

这两个函数将在点击之间交替执行。这是一个内置的 jQuery 函数。