Question

我制作了一个下拉选择器以获得乐趣，但是当它激活菜单时，下拉的片段正在移动一个居中的标题。我试图找到一种方法来阻止使用绝对位置，但它不起作用。如何阻止下拉列表移动其他元素？

$(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>

谢谢！

Answer 1

更改.drop

的css

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

Answer 2

下拉列表必须具有比其他元素更高的css z-index值。然后它将位于元素的顶部。 Check here for example use

停止下拉选择器移动元素

2 个答案: