Question

如果我想将多个项目从显示为“无”更改为显示为“阻止”，那么最有效的方法是什么？

下面我将用于单个项目的JS，但我想在页面或网站上有多个。我应该以某种方式利用函数构造函数吗？

var sideNav = document.getElementById('sideNav');
var menuButton = document.getElementById('menuButton');

function toggle() {
    if(sideNav.style.display) {
        sideNav.style.display = '';
    } else {
        sideNav.style.display = 'block';
    }
}

menuButton.addEventListener('click', toggle);

Answer 1

看看，这是否对您有帮助。我是用香草JS做的，不知道您当前是否在使用jQuery（如果可以，会更容易）

我做了什么：
每个按钮都有自己的id，用于“连接”到应切换的元素。

首先，我将侦听器添加到所有按钮，并在调用函数时传递其id。
然后在函数中，我使用document.querySelectorAll来获取应隐藏/显示的类中的所有元素。
然后，最后我在这些元素中运行一个循环，显示还是不显示，具体取决于其当前的“显示”。

var menuButtons = document.querySelectorAll('.menuButton');
menuButtons.forEach(function(btn){
  btn.addEventListener("click", toggle.bind(this, btn.id));
})

function toggle(id) {
    var sideNav = document.querySelectorAll('.nav_' + id);
    sideNav.forEach(function(el){
      if (el.style.display == 'none'){
        el.style.display = "block";
      } else {
        el.style.display = "none"
      }
    })
}

div{
  height: 30px;
  width: 50px;
  margin: 2px 0;
  background: #999;
  text-align: center
}

<button id="menuButton1" class="menuButton">Toggle 1</button>
<button id="menuButton2" class="menuButton">Toggle 2</button>
<button id="menuButton3" class="menuButton">Toggle 3</button>

<div class="nav_menuButton1">1</div>
<div class="nav_menuButton1">1</div>
<div class="nav_menuButton2">2</div>
<div class="nav_menuButton3">3</div>
<div class="nav_menuButton3">3</div>
<div class="nav_menuButton3">3</div>

也许有更好的方法，但是我现在很着急，这是那一刻我能想到的最好的方法

Answer 2

使用JQuery来获取它：

$(document).ready(function(){
    $('#menuButton').click(toggle);
});


function toggle(){
    $('.toggle-item').each(function(){
            $(this).show();
    })
}

，并为您所有的项目添加带有此CSS的toggle-item类：

.toggle-item{
  display: none;
}

如果每个按钮都有一个要显示的项目，则这样：

$(document).ready(function(){
    $('.menuButton').each(function(){
        var button = $(this);
        button.click(function(){
          toggle(button.attr('data-target')));
        });
    });
});


function toggle(itemId){
    $(itemId).show();
}

将此属性添加到按钮：

<button class="menuButton" data-target="#toggle-item-1"></button>

在页面上具有多个切换项的最有效方法

2 个答案: