Question

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

我的意思是一起工作是当我点击主体上的切换时，侧栏切换反应。它们是to which to的翻转。

<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的评论，您需要拥有唯一的ID和函数名称。当你调用toggleVisibility(...)时，它将调用该方法的第二个声明。此外，当您在“订单”之类的内容上调用document.getElementById(...)时，它会在找到的第一个实例（在您的情况下为a标记）停止。

为您的功能提供唯一的名称，为您的项目提供唯一的ID（如果您希望它们都做同样的事情，您可以查看每个项目使用相同的类），您应该是在一个更好的地方。

javascript如何在页面上进行两次切换以独立工作

1 个答案: