Javascript:第一个下拉框有效，但另一个无效。代码是一样的

我想有九个下拉框，但目前只有两个。问题是它们中只有一个在工作，但它们的代码除了 HTML 不同部分的 ID 有明显变化之外是相同的。当我单击第一个(“mid_side_button”)时，它可以完美运行并显示使用 CSS 创建的内容。当我单击另一个按钮(“right_side_button”)时，它没有执行任何操作。

这是包含相关部分的相关 Javascript 和 HTML

元素。

请不要太在意CSS，它仅供进一步引用。

如果需要任何进一步的信息，请回复。

window.addEventListener('mouseup', function (event) {        /* one of many approaches to open a dropdown */
    "use strict";
    var rightdropdown = document.getElementById('right_side_dropdown_content');
    var rightdropdownbuttontoggle = document.getElementById('right_side_button');
    if (event.target !== rightdropdown) {
        rightdropdown.style.display = 'none';
    }
});
window.onload = function () {
    "use strict";
    var rightbutton = document.getElementById('right_side_button');
    /* creating variable "midbutton" and calling the ID "mid_side_button" */
    var rightdropdowncontent = document.getElementById('right_side_dropdown_content');
    /* same as above */
    document.onclick = function (e) {         /* creating function "e" */
        if (e.target === rightbutton) {
            /* if variable "midbutton" is clicked, display "middropdowncontent" */
            rightdropdowncontent.style.display = 'block';
        }
    };
};
window.addEventListener('mouseup', function (event) {        /* one of many approaches to open a dropdown */
    "use strict";
    var middropdown = document.getElementById('mid_side_dropdown_content');
    var middropdownbuttontoggle = document.getElementById('mid_side_button');
    if (event.target !== middropdown) {
        middropdown.style.display = 'none';
    }
});
window.onload = function () {
    "use strict";
    var midbutton = document.getElementById('mid_side_button');
    /* creating variable "midbutton" and calling the ID "mid_side_button" */
    var middropdowncontent = document.getElementById('mid_side_dropdown_content');
    /* same as above */
    document.onclick = function (e) {         /* creating function "e" */
        if (e.target === midbutton) {
            /* if variable "midbutton" is clicked, display "middropdowncontent" */
            middropdowncontent.style.display = 'block';
        }
    };
};

.individual_left_side_links{
    margin: 0px;
    margin-right: 5px;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    display: block;
    margin-bottom: 10px;
    box-shadow: 2px 2px 2px #888;
    background-image: -webkit-radial-gradient(left top, ellipse farthest-side, #8CFBFF 0%, #FFFFFF 100%);
    overflow: auto;
    width: 300px;
}
#vehicle_3_header{
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 5px;
    margin-bottom: 0px;
    padding: 0px;
    background-image: -webkit-radial-gradient(left top, ellipse farthest-side, #8CFBFF 0%, #FFFFFF 100%);
    width: 300px;
    float: right;
    border-bottom: 2px solid black;
}
.compare_sections_titles{
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 5px;
    margin-bottom: 0px;
}
#right_section{
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 5px;
    margin-top: 0px;
    float: right;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 50px;
    width: 300px;
    margin-bottom: 10px;
    box-shadow: 2px 2px 2px #888;
    background-image: -webkit-radial-gradient(left top, ellipse farthest-side, #8CFBFF 0%, #FFFFFF 100%);
    overflow:auto;
}
#right_side_button{
    background-color: aqua;
    padding-right: 90px;
    padding-left: 90px;
    font-size: 16px;
    border: 1px solid grey;
    -moz-border-radius-topleft: 5px;
	border-top-left-radius: 5px;
	-moz-border-radius-topright: 5px;
	border-top-right-radius: 5px; 
    box-shadow: 2px 2px 2px #888;
}
#right_side_dropdown_content{
    display: none;
    position:absolute;
    background-color: #f9f9f9;
    min-width: 220px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    margin-left: 40px;
    text-align: left;
}
#right_side_dropdown_content a{
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
#right_side_dropdown_content a:hover {
    background-color: #f1f1f1;
}
#mid_section{
    margin: 5px;
    float: left;
    width: 320px;
    text-align: left;
    padding-left: 10px;
    padding-right: 10px;
    background-image: -webkit-radial-gradient(left top, ellipse farthest-side, #8CFBFF 0%, #FFFFFF 100%);
    box-shadow: 1px 1px 2px 2px #888;
}
#mid_side_button{
    background-color: aqua;
    padding-right: 90px;
    padding-left: 90px;
    font-size: 16px;
    border: 1px solid grey;
    -moz-border-radius-topleft: 5px;
	border-top-left-radius: 5px;
	-moz-border-radius-topright: 5px;
	border-top-right-radius: 5px; 
    box-shadow: 2px 2px 2px #888;
}
#mid_side_dropdown_content{
    display: none;
    position:absolute;
    background-color: #f9f9f9;
    min-width: 220px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    margin-left: 40px;
    text-align: left;
}
#mid_side_dropdown_content a{
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
#mid_dropdown_text{
    color: white;
    text-align:center;
}
#mid_side_dropdown_content a:hover {
    background-color: #f1f1f1
}

<div id="mid_container">
        <header id="container_top_padder">
                <li><h2 id="individual_top_padder_text">Compare Vehicles</h2></li>
        </header>
        <article id="left_section">
        <nav id="left_side_nav">                    
                <li><a class="individual_left_side_links">Cars</a></li>
                <li><a class="individual_left_side_links">Bikes</a></li>
                <li><a class="individual_left_side_links">Trucks</a></li>
        </nav>
        </article>
        <article id="mid_section">   
                        <p>Title</p>
                        <p>Subtitle</p>
                        <p>Subtitle</p>
                        <p>Subtitle</p>
                        <button id="mid_side_button">Make</button> 
                        <div id="mid_side_dropdown_content">
                        <p><a class="mid_dropdown_text" href="#">Link 1</a></p>
                        <p><a class="mid_dropdown_text" href="#">Link 2</a></p>
                        <p><a class="mid_dropdown_text" href="#">Link 3</a></p>
                        </div>
        </article>
        <header id="vehicle_3_header">
            <h3 class="compare_sections_titles">Vehicle 3</h3>
        </header>       
            <article id="right_section">
                <button id="right_side_button">Make</button>
                <div id="right_side_dropdown_content">
                    <p><a href="#">Link 1</a></p>
                    <p><a href="#">Link 2</a></p>
                    <p><a href="#">Link 3</a></p>
                </div>
            </article>
    </div> 
    <script type="text/javascript" src="Test3Javascript.js"></script>
    </body>
</html>

最佳答案

请将 window.load 函数的代码添加到与下面相同的单个函数中，或者您只需替换它正在运行的脚本代码

    window.addEventListener('mouseup', function (event) {
        "use strict";
        var rightdropdown = document.getElementById('right_side_dropdown_content');
        var rightdropdownbuttontoggle = document.getElementById('right_side_button');

        var middropdown = document.getElementById('mid_side_dropdown_content');
        var middropdownbuttontoggle = document.getElementById('mid_side_button');

        if (event.target !== rightdropdown) {
            rightdropdown.style.display = 'none';
        }            
        else if (event.target !== middropdown) {
            middropdown.style.display = 'none';
        }
    });
    window.onload = function () {           
        "use strict";
        var rightbutton = document.getElementById('right_side_button');
        var rightdropdowncontent = document.getElementById('right_side_dropdown_content');

        var midbutton = document.getElementById('mid_side_button');
        var middropdowncontent = document.getElementById('mid_side_dropdown_content');

        document.onclick = function (e) {         /* creating function "e" */
            if (e.target === rightbutton) {
                /* if variable "midbutton" is clicked, display "middropdowncontent" */
                rightdropdowncontent.style.display = 'block';
            }
            else if (e.target === midbutton) {
                /* if variable "midbutton" is clicked, display "middropdowncontent" */
                middropdowncontent.style.display = 'block';
            }
        };
    };

关于Javascript:第一个下拉框有效，但另一个无效。代码是一样的，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40607294/

Javascript:第一个下拉框有效，但另一个无效。代码是一样的

上一篇：javascript - 听改变按钮的类名

下一篇：javascript - 限制输入类型数量