下拉列表使元素移动

Dropdown makes elements move

本文关键字：移动 元素 下拉列表      更新时间：2023-09-26

所以我使用 ul 创建了自己的下拉菜单，li这工作正常，但是如果我有display: inline-block的元素，那么当用户单击下拉菜单时，这些元素也会移动。

有没有办法阻止这种情况？

任何帮助不胜感激

这是我的代码：

$('.dropdown').click( function(e) {
  e.preventDefault();
  $('.dropdown-item').toggleClass('active');
});
$('.dropdown-item').click( function() {
  $(this).parent().children('p').text($(this).text());
});
.form-group {
  text-align: center;
  input {
    display: inline-block;
    width: 25%;
    border-radius: 0;
    border: none;
    height: 45px;
    text-align: left;
  }
  .dropdown {
    display: inline-block;
    list-style: none;
    cursor: pointer;
    background-color: $white;
    width: 25%;
    padding-left: 0;
    padding: 12px;
    margin-top: 10px;
    text-align: left;
    @include transition(all, .3s, ease-in-out);
    p {
      padding: 0;
      margin: 0;
      font-size: 14px;
    }
    i {
      position: absolute;
      right: 20px;
      top: 13px;
    }
    li {
      padding: 5px;
      display: none;
      &:first-child {
        margin-top: 20px;
      }
      &:hover {
        background-color: darken($white, 5%);
      }
    }
    .active	{
      display: block;
    }
  }
  .btn-search {
    display: inline-block;
    border-radius: 0;
    color: white;
    padding: 8px 40px;
    font-size: 19px;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <input type="text" name="post-code" value="" size="40" class="form-control" id="postcode" placeholder="Enter your post code">
  <ul class="dropdown"><P>Dropdown</P><i class="fa fa-chevron-down"></i>
    <li class="dropdown-item">Item 1</li>
    <li class="dropdown-item">Item 2</li>
    <li class="dropdown-item">Item 3</li>
  </ul>
  <a class="btn btn-search" href="#" style="background-color: #24638d">Search</a>
</div>

你的html无效，你可以把你的列表变成子列表，或者在ul前面使用标题。

子列表可以处于绝对位置，因此它不会推送任何内容。

ul ul {
  position: absolute;
  display: none;
}
li:hover ul {
  display: block;
}
<ul class="dropdown">
  <li>Dropdown<i class="fa fa-chevron-down"></i>
    <ul>
      <li class="dropdown-item">Item 1</li>
      <li class="dropdown-item">Item 2</li>
      <li class="dropdown-item">Item 3</li>
    </ul>
  </li>
</ul>
<p>text underneath list</p>

相关文章：