基本上我需要的是：当我单击Selectbox1时，将显示PopupMenu1。同时单击Selectbox2时，会显示PopupMenu2，但是PopupMenu1自动隐藏-如何使用当前的代码执行此操作？用我的代码无法做到这一点，因为我的JavaScript一次完成了很多事情-它创建并替换了原始的Select框，向其添加样式，并实现了打开/关闭DropdownMenu功能。
我只能通过以下代码实现我想要的：
$('#sel0').on('click', function() {
$("#it0.select-hide", this).toggle();
if ( $( "#it1" ).is( ".select-hide" ) ) {
$("#it0").show();
} else {
$("#it1").hide();
}
});
$('#sel1').on('click', function() {
$("#it1.select-hide", this).toggle();
if ( $( "#it0" ).is( ".select-hide" ) ) {
$("#it1").show();
} else {
$("#it0").hide();
}
});
因此，我只是将ID分配给了Selectboxes和PopupMenus，并为每个Selectbox进行了来回显示/隐藏代码，并且此代码有效，但这只是第一次。结果是：我单击Selectbox1，使其保持打开状态，然后单击Selectbox2，然后Selectbox1自动关闭（我想要的结果）。但是，当我返回并重新单击Selectbox1时，它保持关闭状态，并且不会打开（效果不佳）。然后，当我单击Selectbox2时，它保持打开状态并且不会关闭（效果不佳）。如何修复代码，以便当我同时单击第二个选择框时，第一个选择框将自动关闭，反之亦然？
var x, i, j, selElmnt, a, b, c;
/*look for any elements with the class "custom-select":*/
x = document.getElementsByClassName("custom-select");
for (i = 0; i < x.length; i++) {
selElmnt = x[i].getElementsByTagName("select")[0];
/*for each element, create a new DIV that will act as the selected item:*/
a = document.createElement("DIV");
a.className = "select-selected";
var list = document.getElementsByClassName("select-selected");
for (var g = 0; g < list.length; g++) {
list[g].id = "sel" + g;
}
var list3 = document.getElementsByClassName("select-selected");
for (var f = 0; f < list3.length; f++) {
list3[f].setAttribute('data-drop', 'it' + f);
}
a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
x[i].appendChild(a);
/*for each element, create a new DIV that will contain the option list:*/
b = document.createElement("DIV");
b.setAttribute("class", "select-items select-hide");
var list2 = document.getElementsByClassName("select-items");
for (var d = 0; d < list2.length; d++) {
list2[d].id = "it" + d;
}
for (j = 1; j < selElmnt.length; j++) {
/*for each option in the original select element,
create a new DIV that will act as an option item:*/
c = document.createElement("DIV");
c.innerHTML = selElmnt.options[j].innerHTML;
c.addEventListener("click", function(e) {
/*when an item is clicked, update the original select box,
and the selected item:*/
var y, i, k, s, h;
s = this.parentNode.parentNode.getElementsByTagName("select")[0];
h = this.parentNode.previousSibling;
for (i = 0; i < s.length; i++) {
if (s.options[i].innerHTML == this.innerHTML) {
s.selectedIndex = i;
h.innerHTML = this.innerHTML;
y = this.parentNode.getElementsByClassName("same-as-selected");
for (k = 0; k < y.length; k++) {
y[k].removeAttribute("class");
}
this.setAttribute("class", "same-as-selected");
break;
}
}
h.click();
});
b.appendChild(c);
}
x[i].appendChild(b);
a.addEventListener("click", function(e) {
/*when the select box is clicked, close any other select boxes,
and open/close the current select box:*/
var body = document.getElementsByTagName("BODY")[0];
e.stopPropagation();
closeAllSelect(this);
// this.nextSibling.classList.toggle("select-hide");
this.nextSibling.classList.toggle("select-hide");
this.classList.toggle("select-arrow-active"); //select-items group
});
}
function closeAllSelect(elmnt) {
/*a function that will close all select boxes in the document,
except the current select box:*/
var x, y, i, arrNo = [];
x = document.getElementsByClassName("select-items");
y = document.getElementsByClassName("select-selected")[0];
for (i = 0; i < y.length; i++) {
if (elmnt == y[i]) {
arrNo.push(i)
} else {
y[i].classList.remove("select-arrow-active");
}
}
for (i = 0; i < x.length; i++) {
if (arrNo.indexOf(i)) {
x[i].classList.add("select-hide");
// x[i].classList.add("select-arrow-active");
}
}
}
/*if the user clicks anywhere outside the select box,
then close all select boxes:*/
document.addEventListener("click", closeAllSelect);/*the container must be positioned relative:*/
.custom-select, .custom-select2 {
position: relative;
font-family: Arial;
border: 1px solid black;
display: inline-block;
height: 32px;
}
.cscon{
width: 160px;
}
.csloc{
width: 160px;
top: -27px;
left: 142px;
}
.cslx{
top: -3px;
left: 145px;
}
.cswx, .cshx{
top: -3px;
left: 155px;
}
.custom-select select, .custom-select2 select{
display: none; /*hide original SELECT element:*/
}
.select-selected, .select-selected2{
background-color: white;
/* border: 1px solid black;
padding: 6px 8px 5px 8px;*/
}
/*style the arrow inside the select element:*/
.select-selected:after, .select-selected2:after{
position: absolute;
content: "";
top: 14px;
right: 10px;
width: 0;
height: 0;
border: 6px solid transparent;
border-color: black transparent transparent transparent;
}
/*point the arrow upwards when the select box is open (active):*/
.select-selected.select-arrow-active:after, .select-selected2.select-arrow-active2:after{
border-color: transparent transparent black transparent;
top: 7px;
transform: rotate(0deg);
}
/*style the items (options), including the selected item:*/
.select-items div, .select-selected, .select-items2 div, .select-selected2{
color: black;
padding: 6px 8px 5px 8px;
border: 1px solid black;
border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
cursor: pointer;
user-select: none;
/*background-color: white;*/
}
/*style items (options):*/
.select-items, .select-items2{
position: absolute;
background-color: white;
top: 100%;
left: -1px;
z-index: 99;
border: 1px solid grey;
width: 100%;
}
.select-items2 {
width: 100%;
}
.cswt {
top: -3px;
left: 160px;
}
#smsel{
/*width: 60px;*/
}
/*hide the items when the select box is closed:*/
.select-hide, .select-hide2 {
display: none;
transition:all 0.1s ease-in-out;
}
.select-items div:hover, .same-as-selected, .select-items2 div:hover, .same-as-selected2{
background-color: rgba(0, 0, 0, 0.1);
transition:all 0.1s ease-in-out;
}<div id="cl1" class="custom-select cscon">
<select id="sl0" class="sel2 lngsel" name="cond" required="required">
<option value="brandnew">Brand New</option>
<option value="likenew">Like New</option>
</select>
</div>
<div id="cl1" class="custom-select cscon">
<select id="sl1" class="sel2 lngsel" name="cond" required="required">
<option value="brandnew">Brand New</option>
<option value="likenew">Like New</option>
</select>
</div>