使用相同的Js函数打开多个下拉菜单

Question

我在页面左侧有这些下拉菜单，用于显示产品详细信息

用户应该能够同时打开它们，这意味着当我打开第一个时，其他的都被按下，以便可见，并且能够打开

Fiddle herehttps://jsfiddle.net/cazg8xwj/3/

<div class="container">
<div class="a">
<center>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
<img src="images/E11A.png" class="bottles"/>
<img src="images/E11A.png" class="bottles"/>
</div>
</div>
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
<img src="images/E11A.png" class="bottles"/>
<img src="images/E11A.png" class="bottles"/>
</div>
</div>
</center>
</div>

样式表

* {
box-sizing: border-box;
}
body {
background-color: grey;
background-size: 100%;
background-image:url('g50.png');
background-repeat: repeat;
}
html,
body {
height: 100%;
margin: 0px;
}
.container {
width: 100%;
height: 1080px;
display: flex;
flex-direction: row;
}
.a {
float: left;
width: 250px;
height: 100%;
border: 1px solid blue;
}
.A-content {
margin:7px;
}

.dropbtn {
width: 98%;
padding: 14px;
background-color: #3498DB;
color: white;
padding: 14px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #2980B9;
}
.dropdown {
width: 100%;
display: inline-block;
}
.dropdown-content {
width: 100%;
height: 200px;
overflow: scroll;
display: none;
background-color: #f1f1f1;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover { background-color: #ddd; }
.show { display: block; }

Js

function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}

Answer 1

当#myDropdown get class show时，它需要是display:inline block，而不是display:block，因为你用position:absolute做了面板，所以你必须更改宽度才能看到里面的所有内容。

/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}

* {
box-sizing: border-box;
}
body {
background-color: grey;
background-size: 100%;
background-image:url('g50.png');
background-repeat: repeat;
}
html,
body {
height: 100%;
margin: 0px;
}
.container {
width: 100%;
height: 1080px;
display: flex;
flex-direction: row;
}
.a {
float: left;
width: 250px;
height: 100%;
border: 1px solid blue;
}
.A-content {
margin:7px;
}
.flexC {
display: flex;
flex-direction: column;
flex-grow: 1;
}
.b {
float: left;
height: 60%;
border: 1px solid blue;
flex-grow: 1;
}
.c {
float: left;
height: 40%;
border: 1px solid blue;
flex-grow: 1;
}
.d {
float: right;
width: 50px;
height: 100%;
border: 1px solid blue;
}
.dropbtn {
width: 98%;
padding: 14px;
background-color: #3498DB;
color: white;
padding: 14px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #2980B9;
}
.dropdown {
width: 100%;
display: inline-block;
}
.dropdown-content {
width: 100%;
height: 200px;
overflow: scroll;
display: none;
position: absolute;
background-color: #f1f1f1;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover { background-color: #ddd; }
.show { display: inline-block;}

<div class="container">
<div class="a">
<center>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
<img src="images/E11A.png" class="bottles"/>
<img src="images/E11A.png" class="bottles"/>
</div>
</div>
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
<img src="images/E11A.png" class="bottles"/>
<img src="images/E11A.png" class="bottles"/>
</div>
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
<img src="images/E11A.png" class="bottles"/>
<img src="images/E11A.png" class="bottles"/>
</div>
</div>
</center>
</div>
<!-- Middle Flex Container -->
<div class="flexC">
<div class="b">
text b
</div>
<div class="c">
text c
</div>
</div>
<div class="d">
Invoice
</div>
</div>

Answer 2

$('.dropbtn').click(function() {
$('.dropdown-content').slideToggle();
});

* {
box-sizing: border-box;
}
body {
background-color: grey;
background-size: 100%;
background-image:url('g50.png');
background-repeat: repeat;
}
html,
body {
height: 100%;
margin: 0px;
}
.container {
width: 100%;
height: 1080px;
display: flex;
flex-direction: row;
}
.a {
float: left;
width: 250px;
height: 100%;
border: 1px solid blue;
}
.A-content {
margin:7px;
}

.dropbtn {
width: 98%;
padding: 14px;
background-color: #3498DB;
color: white;
padding: 14px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #2980B9;
}
.dropdown {
width: 100%;
display: inline-block;
}
.dropdown-content {
width: 100%;
height: 200px;
overflow: scroll;
display: none;
background-color: #f1f1f1;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover { background-color: #ddd; }
.show { display: block; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="a">
<center>
<div class="dropdown">
<button id="dropbtn1" class="dropbtn">Dropdown</button>
<div id="myDropdown1" class="dropdown-content">
<img src="images/E11A.png" class="bottles"/>
<img src="images/E11A.png" class="bottles"/>
</div>
</div>
<button id="dropbtn2" class="dropbtn">Dropdown</button>
<div id="myDropdown2" class="dropdown-content">
<img src="images/E11A.png" class="bottles"/>
<img src="images/E11A.png" class="bottles"/>
</div>
</div>
</center>
</div>