停止下拉选择器在元素上移动

我为了好玩而做了下拉选择器，但是当它激活菜单时，下拉片段正在移动居中标题。我试图找到一种方法来停止使用绝对位置，但它不起作用。我将如何阻止下拉移动其他元素？停止下拉选择器在元素上移动

$(document).ready(function() { 
 
    $('.selectMain').click(function() { 
 
    $('.NonMain').slideToggle('.DropShow'); 
 
    }); 
 
    $('.NonMain').click(function(e) { 
 
    $('.NonMain').slideToggle('.DropShow'); 
 
    var ContentText = $(e.target).text(); 
 
    var MainText = $('.selectMain').text(); 
 
    $('.selectMain').text(ContentText); 
 
    $(e.target).text(MainText); 
 
    }); 
 
});

html, 
 
body { 
 
    margin: 0 !important; 
 
    padding: 0 !important; 
 
    font-family: 'Dosis', sans-serif; 
 
    width: 100%; 
 
} 
 

 
#title { 
 
    font-size: 65px; 
 
    font-family: 'Dosis', sans-serif; 
 
    font-weight: bold; 
 
    text-align: center; 
 
    margin-top: 0; 
 
    padding-top: 50px; 
 
    margin-bottom: 0; 
 
    padding-bottom: 50px; 
 
} 
 

 
#headerCont { 
 
    margin-top: 0px; 
 
} 
 

 
.drop { 
 
    display: block; 
 
    float: right; 
 
} 
 

 
.DropDown { 
 
    cursor: pointer; 
 
    font-size: 24px; 
 
    margin-right: 15px; 
 
    -webkit-touch-callout: none; 
 
    -webkit-user-select: none; 
 
    -khtml-user-select: none; 
 
    -moz-user-select: none; 
 
    -ms-user-select: none; 
 
    user-select: none; 
 
    width: 140px; 
 
    padding: 5px; 
 
    padding-top: 0px; 
 
    margin-top: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html> 
 

 
<head> 
 
    <title>Title</title> 
 
    <link href="https://fonts.googleapis.com/css?family=Dosis" rel="stylesheet" type="text/css"> 
 
</head> 
 

 
<body> 
 
    <div id="headerCont"> 
 

 

 

 

 
    <div class="drop"> 
 
     <div class="selectMain DropDown"> 
 
     One 
 
     </div> 
 
     <div class="NonMain SubjectOne DropDown" style="display: none;"> 
 
     Two 
 
     </div> 
 
     <div class="NonMain SubjectTwo DropDown" style="display: none;"> 
 
     Three 
 
     </div> 
 
    </div> 
 
    <p id="title">Title</p> 
 

 
    </div> 
 

 

 

 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
 
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
 

 

 

 

 
</body> 
 

 
</html>

谢谢！

来源

2017-02-17 Hawkeye

改变你的CSS的.drop

.drop { 
    display: block; 
    right: 0; 
    position:absolute; 
}

$(document).ready(function() { 
 
    $('.selectMain').click(function() { 
 
    $('.NonMain').slideToggle('.DropShow'); 
 
    }); 
 
    $('.NonMain').click(function(e) { 
 
    $('.NonMain').slideToggle('.DropShow'); 
 
    var ContentText = $(e.target).text(); 
 
    var MainText = $('.selectMain').text(); 
 
    $('.selectMain').text(ContentText); 
 
    $(e.target).text(MainText); 
 
    }); 
 
});

html, 
 
body { 
 
    margin: 0 !important; 
 
    padding: 0 !important; 
 
    font-family: 'Dosis', sans-serif; 
 
    width: 100%; 
 
} 
 

 
#title { 
 
    font-size: 65px; 
 
    font-family: 'Dosis', sans-serif; 
 
    font-weight: bold; 
 
    text-align: center; 
 
    margin-top: 0; 
 
    padding-top: 50px; 
 
    margin-bottom: 0; 
 
    padding-bottom: 50px; 
 
} 
 

 
#headerCont { 
 
    margin-top: 0px; 
 
} 
 

 
.drop { 
 
    display: block; 
 
    right: 0; 
 
    position:absolute; 
 
} 
 

 
.DropDown { 
 
    cursor: pointer; 
 
    font-size: 24px; 
 
    margin-right: 15px; 
 
    -webkit-touch-callout: none; 
 
    -webkit-user-select: none; 
 
    -khtml-user-select: none; 
 
    -moz-user-select: none; 
 
    -ms-user-select: none; 
 
    user-select: none; 
 
    width: 140px; 
 
    padding: 5px; 
 
    padding-top: 0px; 
 
    margin-top: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html> 
 

 
<head> 
 
    <title>Title</title> 
 
    <link href="https://fonts.googleapis.com/css?family=Dosis" rel="stylesheet" type="text/css"> 
 
</head> 
 

 
<body> 
 
    <div id="headerCont"> 
 

 

 

 

 
    <div class="drop"> 
 
     <div class="selectMain DropDown"> 
 
     Biology 
 
     </div> 
 
     <div class="NonMain SubjectOne DropDown" style="display: none;"> 
 
     Math 
 
     </div> 
 
     <div class="NonMain SubjectTwo DropDown" style="display: none;"> 
 
     History 
 
     </div> 
 
    </div> 
 
    <p id="title">Title</p> 
 

 
    </div> 
 

 

 

 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
 
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
 

 

 

 

 
</body> 
 

 
</html>

来源

2017-02-17 20:28:54

下拉必须有比其他元素更高的CSS的z-index值。然后它将定位在元素的顶部。 Check here for example use

来源

2017-02-17 20:30:36 Janne

我也会用更高的z-index ...但是我认为如果你的值没有动态地设置为高于所有其他z-index，这可能会给你带来问题... –

停止下拉选择器在元素上移动

回答

相关问题