以下のコンテンツをクリックして下に移動することなく、ドロップダウン作業を行うには

Question

私は現在、アコーディオンとして動作する3つのドロップダウンを持っていますので、ドロップダウンをクリックすると、欲しいです。

ドロップダウンをクリックするたびに、各ドロップダウンの後にコンテンツが移動しないようにするにはどうすればよいですか？

私は絶対的な位置を使用してみましたが、内容がちょっとうんざりです。

私のHTMLは次のようになります。

$(document).ready(function(){ 
 
var dropOneValue = ""; 
 
\t \t $("ul.which-way").on("click", function() { 
 
\t \t $(this).find('li').toggleClass("open-list"); 
 
\t \t $(this).find('open-list').css("display", "block"); 
 
\t \t }); 
 
\t \t $("li.cadja").on("click", function(){ 
 
\t \t \t console.log($(this).find('.value').html()); 
 
     dropOneValue = $(this).find('.value').html(); 
 
     $($(this).parent().find('.which-init')[0]).html($(this).html()); 
 
\t \t }); 
 

 
\t \t $('a#trip').on("click", function(){ 
 
\t \t \t $(this).attr("href", "https://www.westcoastway.co.za/"+dropOneValue); 
 
\t \t }); 
 
\t \t 
 
\t \t $('a#tour').on("click", function(){ 
 
\t \t \t $(this).attr("href", "http://capeytours.co.za/west-coast-tours/"+dropOneValue); 
 
\t \t }); 
 
});

.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; 
 
\t 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{ 
 
\t 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{ 
 
\t /*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{ 
 
\t float: none !important; 
 
\t padding-top: 10px; 
 
} 
 

 
.bold{ 
 
\t font-weight: bold; 
 
} 
 

 
.pink{ 
 
\t 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ことができます願っています。

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

私は私のペンにし、それが動作しないいくつかの理由のためにこれを追加それは

Answer 2

は

.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 3

このCSSを追加します。これは、 "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 4

があなたのスタイルで次のCSSを追加するには、ペンに変更してください。

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