如何在不使以下内容向下移动的情况下进行下拉菜单

Question

我有三个下拉菜单，它们目前可以用作手风琴，所以当我单击下拉菜单时，下面的其余内容都会消失，这是我不希望的。

当我单击下拉菜单时，如何使每次下拉菜单后的内容都不会移动？

我尝试使用绝对定位，但是它只是弄乱了内容。

我的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> 

希望您能提供帮助并在需要时检查我的笔 。

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

http://codepen.io/anon/pen/zwEPeP?editors=1111

Answer 2

在您的笔中进行此更改“ 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%;
}

Answer 3

为此，请更新您的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;
}

让我知道是否有效

Answer 4

在您的样式中添加以下CSS。

 .dropdown { position: relative; } ul.which-way{ position:absolute; left:0; right:0; top:0; } a.find{ margin-top:40px; display:inline-block }