Javascript：第一个下拉框工作，但其他一个不是。代码是一样的

时间：2016-11-15 10:18:16

标签： javascript jquery html css css3

我想要有九个下拉框，但目前只有两个。问题是只有其中一个正在工作，但两者的代码是相同的，除了HTML的不同部分的ID的明显变化。 当我点击第一个（＆＃34; mid_side_button＆＃34;）时，它完美地工作并显示使用CSS创建的内容。当我点击另一个按钮（＆＃34; right_side_button＆＃34;）时，它没有做任何事情。

以下是相关的Javascript和HTML＆lt; div>包含相关部分的元素。

请不要太注意CSS，它仅供进一步参考。

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

＆＃13;
＆＃13; 
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';
        }
    };
};
＆＃13; 
.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
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

4 个答案:

答案 0 :(得分：2)

请将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';
            }
        };
    };

答案 1 :(得分：0)

＆＃13;
＆＃13; 
window.addEventListener('mouseup', function (event) {        /* one of many approaches to open a dropdown */
    "use strict";
    var rightdropdown = document.getElementById('right_side_dropdown_content');
   var middropdown = document.getElementById('mid_side_dropdown_content');
   
    if (event.target !== middropdown) {
        middropdown.style.display = 'none';
    }
    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');

    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');
    
    document.onclick = function (e) {         /* creating function "e" */
        if (e.target === rightbutton) {
            /* if variable "midbutton" is clicked, display "middropdowncontent" */
            rightdropdowncontent.style.display = 'block';
        }
 if (e.target === midbutton) {
            /* if variable "midbutton" is clicked, display "middropdowncontent" */
            middropdowncontent.style.display = 'block';
        }
    };
};
＆＃13; 
.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
}
＆＃13; 
<div id="mid_container">         
     <article id="mid_section">                             
         <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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

当你点击右侧，因为你有两个window.load函数，它只用于中键功能。 在相同的加载函数中写下中间按钮下方的右键代码，即 单个window.load函数，包含按钮单击事件

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';
        }
    };

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';
        }
    };
};

答案 3 :(得分：0)

不要为window.onload分配不同的功能。在分配两个函数时，第二个函数正在工作。

检查以下链接

Add two functions to window.onload

相关问题
最新问题