停止下拉選擇器在元素上移動

我爲了好玩而做了下拉選擇器，但是當它激活菜單時，下拉片段正在移動居中標題。我試圖找到一種方法來停止使用絕對位置，但它不起作用。我將如何阻止下拉移動其他元素？停止下拉選擇器在元素上移動

$(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，這可能會給你帶來問題... –

停止下拉選擇器在元素上移動

回答

相關問題