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属性...也许最好为每个状态创建具有适当属性的类，并在单击按钮时简单地交换类。 Meliborn在评论中提到了这一点。

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函数。

单击更改按钮功能？

4 个答案: