创建交互式菜单

Question

我希望创建一个交互式菜单，它可以完成几件不同的事情。 总体布局如下：

|按钮1 |按钮2 |按钮3 |按钮4 |
|上面的按钮需要在这里显示一个独特的菜单|

菜单下方的框（div）将根据上面选择的按钮组合显示内容

我了解如何使用可点击链接创建列表。我不明白的是如何利用脚本将所有内容联系在一起并使其以上述方式进行交互

Answer 1

你真的应该在你现有的代码和功能问题的背景下提出问题..而不是设计功能或基于教程的问题。

话虽如此，我将为此提供答案和代码示例，因为我想向开发人员（尤其是DBA）介绍按位操作。因为我们可以用这种方式更好地代表国家..

这并不是说我的以下代码是最佳实践或最佳。

var buttons = document.querySelectorAll("button[data-bit");
var sections = document.querySelectorAll("section[data-bit]");
var menuvalue = 0; //0 displays nothing
var clrBtn = document.querySelector("button#none");


clrBtn.addEventListener("click", function() {
    menuvalue = 0;
    setDisplay();
});

for(var i = 0, max = buttons.length; i < max ; i++)
{
  buttons[i].addEventListener("click", changeValue.bind(null, Math.pow(2, i)));
}

function changeValue(value) {
    console.log(value);
    menuvalue ^= value; //XOR operation assignment  (http://msdn.microsoft.com/en-us/library/ie/06f6ta51(v=vs.94).aspx)
    console.log(menuvalue);
    setDisplay();
}

function setDisplay()  {
    for (var i = 0, max = sections.length; i < max; i++)
    {
        
        console.log("section: %o, menuvalue: %o, result: %o", Math.pow(2, i), menuvalue, (Math.pow(2, i) & menuvalue));
        sections[i].style.display = (Math.pow(2, i) & menuvalue) > 0 ? "block" : "none";      
    }
}

section {
  display:none;
  background-color:whitesmoke;
  border:0.1em outset whitesmoke;
  line-height:1.25em;
  padding:2em;
  }

section[data-bit] {
  display:none;
  }


button.check {
  border:0.1em inset whitesmoke;
  background-color:whitesmoke;
  }

<nav>
<button id="none">None</button>
<button data-bit="0">Menu Item 1</button>
<button data-bit="1">Menu Item 2</button>
<button data-bit="2">Menu Item 3</button>
<button data-bit="4">Menu Item 4</button>
<button data-bit="8">Menu Item 5</button>
</nav>

<section class="empty">
This is either the default value, displaying no menu items.. or you could hide this and display nothing!
</section>
<section data-bit="0">
This is the contents of Menu Item 1
</section>
<section data-bit="1">
This is the contents of Menu Item 2
</section>
<section data-bit="2">
This is the contents of Menu Item 3
</section>
<section data-bit="4">
This is the contents of Menu Item 4
</section>
<section data-bit="8">
This is the contents of Menu Item 5
</section>

JsFiddle：Here

处理组合：Here