我有三个下拉列表，目前用作手风琴，所以当我点击一个下拉列表时，下面的其他内容会出现故障，这是我不想要的。
每当我点击下拉列表时，如何在每次下拉后都不会移动内容？
我尝试使用绝对定位，但它只是弄乱了内容。
我的HTML看起来像这样：
SELECT
name1,count1,count2FROM
(
SELECT
trade.name AS name1, COUNT(workorders.id) AS count1
FROM workorders
RIGHT JOIN trade
ON trade.id = workorders.trade_id
AND workorders.hcworkorderstat_id IN (
SELECT hcworkorderstat.id
FROM hcworkorderstat
WHERE hcworkorderstat.code NOT IN ( 'CL','CANCEL' ))
GROUP BY trade.name
) tab1LEFT JOIN
(
SELECT
trade.name AS name2,
COUNT(workorders.id) AS count2
FROM
workorders
RIGHT JOIN
trade
ON
workorders.trade_id = trade.id
AND
workorders.requesteddate BETWEEN '1391.01.15' AND '1396.10.15'
GROUP BY
trade.name
) tab2
ON tab1.name1=tab2.name2
$(document).ready(function(){
var dropOneValue = "";
$("ul.which-way").on("click", function() {
$(this).find('li').toggleClass("open-list");
$(this).find('open-list').css("display", "block");
});
$("li.cadja").on("click", function(){
console.log($(this).find('.value').html());
dropOneValue = $(this).find('.value').html();
$($(this).parent().find('.which-init')[0]).html($(this).html());
});
$('a#trip').on("click", function(){
$(this).attr("href", "https://www.westcoastway.co.za/"+dropOneValue);
});
$('a#tour').on("click", function(){
$(this).attr("href", "http://capeytours.co.za/west-coast-tours/"+dropOneValue);
});
});.which-wrapper {
width: 100%;
max-width: 300px;
}
ul.which-way li:not(:first-child) {
display: none;
}
.value{
display: none !important;
}
ul.which-way {
margin: 0;
list-style: none;
cursor: pointer;
margin-bottom: 5px;
border: 1px solid;
padding: 5px;
border-radius: 2.5px;
}
ul.which-way:hover {
border: 1px solid #ec008c;
}
li.which-init:after {
content: '\f002';
font-family: fontawesome;
float: right;
font-size: 18px;
color: #555;
}
.value{
display: none;
}
li.open-list {
display: block !important;
}
.find{
margin-bottom: 10px;
display: inline-block;
width: 100%;
}
a.find{
display: block;
background: #ec008c;
border: 0;
color: white;
padding: 10px;
margin-top: 10px;
text-decoration: none;
text-align: center;
text-transform: uppercase;
border-radius: 2.5px;
animation-duration: .1ms;
-webkit-animation-name: mui-node-inserted;
animation-name: mui-node-inserted;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
cursor: pointer;
-ms-touch-action: manipulation;
touch-action: manipulation;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
box-sizing: border-box;
font-size: 16px;
line-height: 1.15;
letter-spacing: 1px;
}
a.find:hover{
/*background-color: #F15A24 !important;
border-top: 1.5px solid #F15A24;
color: white;
transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;*/
}
.way-widget{
float: none !important;
padding-top: 10px;
}
.bold{
font-weight: bold;
}
.pink{
color: #ec008c;
}
希望你能提供帮助check my pen if needed。
答案 0 :(得分：1)
添加此css
.drowpdown-one{
padding-top: 30px;
position: relative;
}
ul.which-way {
margin: 0;
list-style: none;
background-color: grey;
margin-bottom: 5px;
position: absolute;
top:0;
}
答案 1 :(得分：1)
在您的笔＆＃34; codepen.io/Sidney-Dev/pen/KmvdYq?editors=1111＆＃34;
中进行此更改ul.which-way {
margin: 0;
list-style: none;
margin-bottom: 5px;
position: absolute;
border: 1px solid;
padding: 5px;
border-radius: 2.5px;
top:0;
width: 100%;
z-index: 9999;
cursor: pointer;
}
.cadja{
background: white;
width: 100%;
}
答案 2 :(得分：1)
为此更新你的css： 你的下拉必须删除他们的填充，你可以给他们100％而不是96％。
.which-wrapper {
width: 100%;
max-width: 300px;
}
.drowpdown-one{
padding-top: 30px;
position: relative;
}
ul.which-way {
margin: 0;
list-style: none;
margin-bottom: 5px;
position: absolute;
border: 1px solid;
border-radius: 2.5px;
top: -32px;
width: 100%;
cursor: pointer;
background: white;
}
ul.which-way li:not(:first-child) {
display: none;
}
.value{
display: none;
}
li.open-list {
display: block !important;
}
.find{
margin-bottom: 10px;
display: inline-block;
width: 100%;
}
a.find{
display: block;
background: #ec008c;
border: 0;
color: white;
padding: 10px;
margin-top: 20px;
text-decoration: none;
text-align: center;
text-transform: uppercase;
border-radius: 2.5px;
border-bottom: 2px solid #cb348d;
animation-duration: .1ms;
-webkit-animation-name: mui-node-inserted;
animation-name: mui-node-inserted;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
cursor: pointer;
-ms-touch-action: manipulation;
touch-action: manipulation;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
box-sizing: border-box;
border-top: 1.5px solid #e542a3;
font-size: 16px;
line-height: 1.15;
letter-spacing: 1px;
}
a.find:hover{
background-color: #cb348d;
border-top: 1.5px solid #cb348d;
color: white;
transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;*/
}
ul.which-way:hover {
border: 1px solid #ec008c;
}
li.which-init:after {
content: '\f002';
font-family: fontawesome;
float: right;
font-size: 18px;
color: #555;
}
.way-widget{
float: none !important;
padding-top: 10px;
}
.way-widget p {
float: none !important;
padding-bottom: 0px;
}
.bold{
font-weight: bold;
}
.pink{
color: #ec008c;
}
.indexed{
z-index: 100;
}
让我知道它是否有效
答案 3 :(得分：0)
在你的风格中添加以下css。
.dropdown {
position: relative;
}
ul.which-way{
position:absolute;
left:0;
right:0;
top:0;
}
a.find{
margin-top:40px;
display:inline-block
}
.dropdown {
position: relative;
}
ul.which-way{
position:absolute;
left:0;
right:0;
top:0;
}
a.find{
margin-top:40px;
display:inline-block
}