Javascript Div下拉列表相互干扰

我正在尝试创建一个门户页面，但是这些下拉按钮有问题。我希望所有的下拉列表都能同时出现在屏幕上，但我不确定如果没有彼此的下拉列表，我怎么能做到这一点。这是我正在使用的小提琴。

这是HTML

        <div class="fadeIn" id="logo"><span class="dark">MC</span><span class="light">Market</span></div>
    <div id="action"><span class="dark">What would you like to do?</span></div>
    <div id="wrapper">
        <a href="#" onclick="toggle_visibility('buyselltoggle');"><div id="button"><div id="text"><i class="fa fa-shopping-cart"></i><br>Buy/Sell</div></div></a>
        <a href="#" onclick="toggle_visibility('offertoggle');"><div id="button"><div id="text"><i class="fa fa-share"></i><br>Offer</div></div></a>
        <a href="#" onclick="toggle_visibility('hiretoggle');"><div id="button"><div id="text"><i class="fa fa-users"></i><br>Hire</div></div></a>
    </div>
    <div id="buyselltoggle">
        <a href="#"><div id="button2"><div id="text2">Buy/Sell</div></div></a><br>
        <a href="#"><div id="button2"><div id="text2">Buy/Sell</div></div></a><br>
        <a href="#"><div id="button2"><div id="text2">Buy/Sell</div></div></a><br>
        <a href="#"><div id="button2"><div id="text2">Buy/Sell</div></div></a><br>
        <a href="#"><div id="button2"><div id="text2">Buy/Sell</div></div></a>
    </div>
    <div id="offertoggle">
        <a href="#"><div id="button2"><div id="text2">Buy/Sell</div></div></a><br>
        <a href="#"><div id="button2"><div id="text2">Buy/Sell</div></div></a><br>
        <a href="#"><div id="button2"><div id="text2">Buy/Sell</div></div></a><br>
        <a href="#"><div id="button2"><div id="text2">Buy/Sell</div></div></a><br>
        <a href="#"><div id="button2"><div id="text2">Buy/Sell</div></div></a>
    </div>
    <div id="hiretoggle">
        <a href="#"><div id="button2"><div id="text2">Buy/Sell</div></div></a><br>
        <a href="#"><div id="button2"><div id="text2">Buy/Sell</div></div></a><br>
        <a href="#"><div id="button2"><div id="text2">Buy/Sell</div></div></a><br>
        <a href="#"><div id="button2"><div id="text2">Buy/Sell</div></div></a><br>
        <a href="#"><div id="button2"><div id="text2">Buy/Sell</div></div></a>
    </div>
    </center>
    <div id="bar"><a href="#"><div id="continue">Click to continue to the forums>></div></a></div>
    <script>
    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'table')
          e.style.display = 'none';
       else
          e.style.display = 'table';
    }
    </script>

MCMarket
你想做什么？
























功能切换\u可见性（id）{
var e=document.getElementById（id）；
如果（e.style.display=='table'）
e、 style.display='none'；
其他的
e、 style.display='table'；
}

您有许多非唯一的ID

ID在文档中必须是唯一的，通常用于检索 元素使用

---

这将影响您的JavaScript。如果您想要非唯一标识符，我建议您使用类。

这是否更接近您想要的（单击切换）

我们可以稍微加点劲

JS

---

你能告诉我们你说的所有下拉列表同时出现是什么意思吗？你想在三个盒子下面有15个按钮吗？或者单击大按钮时仅显示五个按钮？单击大按钮时显示的五个小按钮的列表。当前的问题是，当单击多个大按钮时，第二个列表中的五个小按钮将不合适。当只有一个列表被切换时，它可以正常工作。

$('.buysellbutton').on('click', function(){
      $('#buyselltoggle').toggle();
});
$('.offerbutton').on('click', function(){
      $('#offertoggle').toggle();
});
$('.hirebutton').on('click', function(){
      $('#hiretoggle').toggle();
});
$(':not(#wrapper)').on('click', function(){
});