javascript - Div下拉菜单相互干扰

Question

我正在尝试创建一些门户页面，但我遇到了这些下拉按钮的问题。我想如果所有的下拉菜单都可以同时显示在屏幕上，但我不确定如果没有彼此的下拉菜单我怎么能做到这一点。这是我正在使用的 fiddle 。 http://jsfiddle.net/Propulsionz/37ub1ge7/

这是 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>

Answer 1

您有许多不唯一的 ID。

The ID must be unique in a document, and is often used to retrieve the element using

https://developer.mozilla.org/en-US/docs/Web/API/Element.id

这会影响您的 JavaScript。如果您需要非唯一标识符，我建议您改用类。