Question

我正在尝试创建一些门户网站页面，但我遇到了这些下拉按钮的问题。我想如果所有的下拉菜单都可以立刻在屏幕上显示，但我不确定如果没有相互下拉的话，我怎么能做到这一点。这是我正在与之合作的小提琴。 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。

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

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

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

Answer 2

这是否更接近你想要的（点击时切换）？

我们可以把它搞砸了。

FIDDLE

JS

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

Div下拉互相干扰

2 个答案: