首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >如何使下拉菜单工作,而不使下面的内容在点击时向下移动

如何使下拉菜单工作,而不使下面的内容在点击时向下移动
EN

Stack Overflow用户
提问于 2017-05-05 17:17:46
回答 4查看 55关注 0票数 0

我有三个下拉菜单,它们目前可以作为手风琴使用,所以当我点击一个下拉菜单时,下面剩下的内容就会向下拉,这是我不想要的。

如何才能在每次点击下拉列表时,使内容在每次下拉后都不移动?

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

我的html如下所示:

代码语言:javascript
复制
$(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);
		});
});
代码语言:javascript
复制
.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;
}
代码语言:javascript
复制
<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

EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2017-05-05 18:24:37

为此更新你的css :你的下拉列表必须删除它们的填充,你可以给它们100%而不是96%。

代码语言:javascript
复制
.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;
}

如果有效,请让我知道

票数 1
EN

Stack Overflow用户

发布于 2017-05-05 17:23:51

添加此css

代码语言:javascript
复制
.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

票数 1
EN

Stack Overflow用户

发布于 2017-05-05 17:39:49

在您的笔"codepen.io/Sidney-Dev/pen/KmvdYq?editors=1111“中进行此更改

代码语言:javascript
复制
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%;
}
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/43801070

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档