Div下拉框相互干扰

Div dropdowns interfering with eachother

本文关键字：干扰 Div      更新时间：2023-09-26

我试图创建一个门户页面，但我有这些下拉按钮的问题。我希望所有的下拉菜单都能同时显示在屏幕上但我不确定如果没有下拉菜单，我怎么能做到这一点。这是我要用的小提琴。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>

您有许多不是唯一的ID。

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

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

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

这更接近你想要的(点击切换)吗?

我们可以稍微修饰一下。

小提琴

JS 

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