Question

我必须执行以下操作：openNav和closeNav和一个按钮：

 <a href="#" data-toggle="sidebar-collapse-button">
                    <img class="sidebar-img" id = "collapse-img" src="${pageContext.request.contextPath}/imgs/main/sidebar/collapse.png"/>
                    <span class="sidebar-text">Collapse</span>
 </a>

尝试像这样设置条件onClick：

var collapsed = 0;

$('[data-toggle=sidebar-collapse-button]').click(function() {
    if (collapsed==0)  {
    closeNav();
    }
    else  {
        openNav();
    }    

});

这样，当调用collapsed = 1函数openNav时，反之亦然：

function openNav() {
    ...

    collapsed=0;
}

function closeNav() {
    ...

    collapsed=1;
}

但是，它仅在第一次调用closeNav时有效，然后按钮完全不起作用。

Answer 1

这是香草Javascript中的简单切换器。我不确定您想做什么或使用什么框架，但这是基本思想

 <a href="#" onCLick="toggleSidebar()" data-toggle="sidebar-collapse-button">
  <span class="sidebar-text">Collapse</span>
 </a>

<div id="myDiv">
  Collapsed div
</div>

toggleSidebar = () => {
  let element = document.getElementById("myDiv")
  if(element.classList.contains("mystyle")){
    element.classList.remove("mystyle");
  } else  element.classList.add("mystyle");
}

Answer 2

正如@connexo所说，我也倾向于使用切换开关-如果它是显示和隐藏，则您要尝试实现。

如果您想使用自己的逻辑，则可以使用数据属性（或类似方法）执行以下操作：

例如：

<a href="#" data-toggle="sidebar-collapse-button" data-state="0">
                    <img class="sidebar-img" id = "collapse-img" src="https://via.placeholder.com/150"/>
                    <span class="sidebar-text">Collapse</span>
 </a>

对于您的脚本，您可以使用：

var collapsed = 0;

$('[data-toggle=sidebar-collapse-button]').click(function() {
    var state = $(this).data('state');
    if (state == "0") {
        console.log("Closed");
      $(this).data('state','1')
    } else {
        console.log("Opened");
      $(this).data('state','0')
    }
console.log(state);
});

进一步阅读数据：.data()

Javascript：条件函数onClick按钮

2 个答案: