0
私は現在、アコーディオンとして動作する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ことができます願っています。
を動作するかどうか私に教えてください。 http://codepen.io/Sidney-Dev/pen/KmvdYq?editors=1111 –
私は実際にそれを動作させることができましたが、ドロップダウンはその内容よりも広くなっています。どのように私はそれを修正することができますか？ –