我有三个下拉菜单,它们目前可以作为手风琴使用,所以当我点击一个下拉菜单时,下面剩下的内容就会向下拉,这是我不想要的。
如何才能在每次点击下拉列表时,使内容在每次下拉后都不移动?
我尝试使用绝对定位,但它只是弄乱了内容。
我的html如下所示:
$(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;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="which-wrapper">
<label class="bold">Would you like to explore the West Coast?</label>
<div class="drowpdown-one dropdown">
<ul class="which-way">
<li class="which-init"><span class="pink">Unguided</span> <span class="bold">I-Day Return Trips</span></li>
<li data-value="value 2" class="cadja"><span class="value">darling-wine-hops-day-by-which-way</span><span class="real">Darling Wine & Beer Trip</span></li>
<li data-value="value 3" class="cadja"><span class="value">mamre-werf-khwa-ttu-culture-day-by-which-way-trips</span><span class="real">Culture & Adventure Trip</span></li>
<li data-value="value 4" class="cadja"><span class="value">cape-west-coast-wildlife-fossil-trip</span><span class="real">Wildlife & Fossils Trip</span></li>
</ul>
<a href="#" target="__blank" id="trip" class="find">FIND YOUR TRIP</a>
</div>
<div class="drowpdown-two dropdown">
<ul class="which-way">
<li class="which-init"><span class="pink">Guided</span> <span class="bold">Multi-Day Tours</span></li>
<li data-value="value 2" class="cadja"><span class="value">5-day-west-coast</span><span class="real">5 Day West Coast Explorer</span></li>
<li data-value="value 3" class="cadja"><span class="value">5-day-namaqua-spring-flower-tour</span><span class="real">5 Day Namaqualand Spring Flower</span></li>
</ul>
<a href="#" target="__blank" id="tour" class="find">FIND YOUR TRIP</a>
</div>
<div class="drowpdown-three dropdown">
<ul class="which-way">
<li class="which-init"><span class="pink">Guided</span> <span class="bold">Tours departing Langebaan</span></li>
<li data-value="value 2" class="cadja"><span class="value">flower-routes</span><span class="real">Eco Tourism Routes West Coast</span></li>
<li data-value="value 3" class="cadja"><span class="value">coastal-tour</span><span class="real">Coastal Tours</span></li>
<li data-value="value 3" class="cadja"><span class="value">adventure-trips</span><span class="real">Adventure Tours</span></li>
</ul>
<a href="#" target="__blank" id="tour-2" class="find">FIND YOUR TRIP</a>
</div>
</div>
希望你能帮助和check my pen if needed。
发布于 2017-05-05 18:24:37
为此更新你的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;
}如果有效,请让我知道
发布于 2017-05-05 17:23:51
添加此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;
}http://codepen.io/anon/pen/zwEPeP?editors=1111
发布于 2017-05-05 17:39:49
在您的笔"codepen.io/Sidney-Dev/pen/KmvdYq?editors=1111“中进行此更改
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%;
}https://stackoverflow.com/questions/43801070
复制相似问题