将第二个功能添加到单个按钮

Posted 2021-04-04

我有一个按钮，我想在两个“功能”之间切换。我想让它打开和关闭我的菜单

我想在第一次点击时添加onclick="openNav()"，然后在第二个html上添加onclick="closeNav()"

<button id="nav-icon" class="navbar-toggler hidden-sm-up" type="button" onclick="openNav()"></button>

我不确定最好的方法，如果鳕鱼在两个单独的按钮上，它就可以工作。

编辑：我正在使用Wordpress所以所有的javascript都在一个单独的.js文件中引入

答案

你可以创建一个toggleNav函数，它可以通过使用像这样的布尔值来执行你的openNav和closeNav函数之间的替代：

let opened = false; // set the nav as closed by default
function toggleNav() {
  if(!opened) { // if opened is false (ie nav is closed), open the nav
    openNav()
  } else { // else, if opened is ture (ie nav is open), close the nav
    closeNav();
  }
  opened = !opened; // negate boolean to get opposite (t to f, and f to t)
}

function openNav() {
  console.log("Opened Nav");
}

function closeNav() {
  console.log("Closed Nav");
}

<button id="nav-icon" class="navbar-toggler hidden-sm-up" type="button" onclick="toggleNav()">Toggle Nav</button>

另一答案

你通常会有类似的东西：

<button id="nav-icon" class="navbar-toggler hidden-sm-up" type="button" onclick="toggleNav()"></button>

和JS：

var navOpen = false;
function toggleNav(){ 
   navOpen = !navOpen
   // Do conditional show hide here based on navOpen
}

另一答案

只需为每个功能添加一行：

在openNav()：

document.getElementById("nav-icon").setAttribute("onclick", "closeNav()");

在closeNav()：

document.getElementById("nav-icon").setAttribute("onclick", "openNav()");

另一答案

您可以在两个函数的末尾更改元素的onclick。

let btn = document.getElementById('nav-icon');
function openNav(){
  console.log('openNav called');
  btn.onclick = closeNav
}
function closeNav(){
  console.log('closeNav called');
  btn.onclick = openNav
}

<button id="nav-icon" class="navbar-toggler hidden-sm-up" type="button" onclick="openNav()"></button>

另一答案

也许你可以根据一些标志值调用函数：

var flag = true;
var navBtn = document.querySelector('#nav-icon');
navBtn.addEventListener('click', function(btn){
  if(flag) openNav();
  else closeNav();
  flag = !flag;
});

function openNav(){
  console.log('Open');
}

function closeNav(){
  console.log('Close');
}

<button id="nav-icon" class="navbar-toggler hidden-sm-up" type="button">Click</button>

以上是关于将第二个功能添加到单个按钮的主要内容，如果未能解决你的问题，请参考以下文章

按下按钮时为单个视图添加子视图

将第二个图表添加到 Dash app.layout 的问题

TypeError：将第二个图例添加到绘图时，“PathCollection”对象不可迭代

将第二个 UIToolbar 添加到 UITableViewController

将第二个表中的第二个（条件）结果添加到 SQL 查询

无法将第二个自引用 FK 添加到模型，导致无法确定主体结束错误