javascript 如何让页面上的两个切换独立工作

Question

您好，我目前有两个切换开关，一个在侧边栏，一个在主体中。他们目前一起工作很烦人，即使我正在使用不同的脚本。我目前用于切换的脚本几乎相同，但是，即使使用完全不同的脚本，它们仍然可以一起工作。

我所说的协同工作的意思是当我单击主体上的切换时，侧栏切换会做出反应。 它们是在 oclick 上折叠的切换开关。

<script>
        var divs = ["Menu", "Add"];
        var visibleDivId = null;

        function toggleVisibility(divId) {
            if(visibleDivId === divId) {
                visibleDivId = null;
            } else {
                visibleDivId = divId;
            }
            

            hideNonVisibleDivs();
        }

        function hideNonVisibleDivs() {
            var i, divId, div;

            for(i = 0; i < divs.length; i++) {
                divId = divs[i];
                div = document.getElementById(divId);

                if(visibleDivId === divId) {
                    div.style.display = "block";
                } else {
                    div.style.display = "none";
                }
            }
        }
    </script>
    
     <script>
        $(document).ready(function () {
            // set up the click event
            $('.body > a').on('click', function(){
                $(this).next('div').siblings('div:not(#Menu)').hide("1");
            });
            // trigger orders which has id francc, not orders // .show("1") goes between $(this).next('div') + .siblings 
            // if i want a transition
            $('#Menu').trigger('click');
            // options include >>>, but it's slower // $('a[name="account"]').trigger('click');
        });
                
    </script>

   <!--  sidebar  toggle-->
    <script>
        var divs = ["Order", "Rest", "Franc"];
        var visibleDivId = null;

        function toggleVisibility(divId) {
            if(visibleDivId === divId) {
                visibleDivId = null;
            } else {
                visibleDivId = divId;
            }
            

            hideNonVisibleDivs();
        }

        function hideNonVisibleDivs() {
            var i, divId, div;

            for(i = 0; i < divs.length; i++) {
                divId = divs[i];
                div = document.getElementById(divId);

                if(visibleDivId === divId) {
                    div.style.display = "block";
                } else {
                    div.style.display = "none";
                }
            }
        }
    </script>

    <!--    Change color on click-->

    <script>
        $(document).ready(function() { 
            $('.sidebar h3').on('click', function() {
                $('.sidebar h3').css('color', 'black');
                $(this).css('color', 'red');
            });
            $('h3#open').trigger('click');  //Your account red on page load
        });
    </script>


    <!--Your account toggle open on load    -->
    <script>
        $(document).ready(function () {
            // set up the click event
            $('.sidebar > a').on('click', function(){
                $(this).next('div').siblings('div:not(#Franc)').hide("1");
            });
            // trigger orders which has id francc, not orders // .show("1") goes between $(this).next('div') + .siblings 
            // if i want a transition
            $('#francc').trigger('click');
            // options include >>>, but it's slower // $('a[name="account"]').trigger('click');
        });
                
    </script>

<div class="sidebar">

            <!--             Orders toggle-->

            <a  id="order" class="header" href="#" onclick="toggleVisibility('Order');"><h3 id="orderr">Orders</h3></a>
            <div id="Order" style="display: none;">    
                <div>
                    <ul class="tabs">
                        <li id="order" class="Red"><a href="Franchise-account-orders.php">Overview</a></li>
                      </ul>
                </div>
            </div>


            <!--Restaurant toggle-->
            <a id="restt" class ="header"href="#" onclick="toggleVisibility('Rest');"><h3>Your Restaurants</h3></a>
            <div id="Rest" style="display: none;"><div>

                    <ul class="tabs">
                        <!--                    <li id="order" class="rred"><a href="Franchise-account-orders.php">restaurant</a></li>-->
                        <li id="order" class="rgreen"><a href="Franchise-account-orders.php">New restaurant</a></li>

                    </ul>

                </div>
            </div>



            <!--            Account toggle-->
            <a id="francc" name="account" class ="header" href="#" onclick="toggleVisibility('Franc');"><h3 id="open">Your Account</h3></a>
            <div id="Franc" style="display: none;">
                <div>
                    <ul class="tabs">
                      <li id="order" class="Blue" ><a href="admin_panel.php">Order History</a></li>
                    </ul>
                </div>
            </div>
        </div>

<div id=body>
            <!--    Menu toggle      -->
            <div class="container_head">  <!--            red header top of container-->
                <a  id="Menu" class="header" href="#" onclick="toggleVisibility('Menu');"><h3>Menu Section</h3></a>
            </div>
            <div id="Menu_form" style="display: none;">   

                <form id="MenuForm" action ="javascript:void(0);" method="POST">
<!--                    <div class="field">-->
                        <label for="Name">Name</label>
                        <input type="text" name="Name" id="Name" placeholder="Steaks pattern="[a-zA-Z]" 
                               required tabindex="1">
                        <br>

                        <label for="Description">Description</label>
                        <input type="text" name="Description" id="Description" placeholder="Fresh USDA Choice steaks, seasoned with hickory-smoked sea salt." tabindex="2">

                        <br>
                        
                         <div class="field">
                    <input type="submit"  value="Save">
                </div>
                        </form>
                    </div>
                                                      <a  id="add_prod" class="header" href="#" onclick="toggleVisibility('Add');"><h3>Orders</h3></a>
            <div id="add" style="display: none;">    

            </div>

Answer 1

结合@j08691 和 Leo Farmer 的 cmets，您需要拥有唯一的 ID 和函数名称。当您调用toggleVisibility(...) 时，它将调用该方法的第二个声明。此外，当您在“订单”之类的内容上调用 document.getElementById(...) 时，它会在它找到的第一个实例处停止（在您的情况下，是 a 标记）。

为您的函数指定唯一名称，为您的项目指定唯一 ID（如果您希望它们都做同样的事情，您可以考虑为每个项目使用相同的 class），您应该在一个更好的地方。