为什么我的下拉菜单显示在顶部？

Question

我有一个响应网站与引导4。我有一个下拉按钮，当点击显示下拉菜单。当测试我的手机下拉式(iPhone XR)时，下拉菜单显示在网站的顶部，而不是它应该在下拉按钮下面。

​

/* DESKTOP */


/* Searchbar Container */

.searchbar-container {
  background-color: white;
  padding: 15px 10px;
}

.square-btn-left,
.square-btn-right {
  background-color: #8ABE57;
  color: white;
  height: 45px;
  width: 50px
}

.searchbar-field {
  height: 45px;
  border: 2px solid #eee;
  border-left: none;
  border-right: none;
}

.category-dropdown-menu {
  padding: 0.35rem 1.5rem;
  height: 500px;
  overflow-y: scroll;
}

.category-dropdown-menu li a {
  color: #31353C;
  line-height: 2em;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<div class="input-group">
  <div class="input-group-btn search-panel">
    <button type="button" class="btn dropdown-toggle square-btn-left" data-toggle="dropdown" id="serviceCategorySearchDropdown">
                            <i class="far fa-list-ul"></i>
                          </button>
    <ul class="dropdown-menu category-dropdown-menu" role="menu">
      <li><a href="#"><i class="fas fa-shovel pr-3"></i>Item 1</a></li>
      <li><a href="#"><i class="fas fa-utensils pr-3"></i>Item 2</a></li>
      <li><a href="#"><i class="fas fa-ruler-triangle pr-3"></i>Item 3</a></li>

    </ul>
  </div>
  <input type="hidden" name="search_param" value="all" id="search_param">
</div>



<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

​

Answer 1

原因是当按钮单击ul class="dropdown-menu category-dropdown-menu"时，会得到内联样式。它还会得到show类。

为了覆盖样式属性，可以：

.dropdown-menu.category-dropdown-menu.show { top: 3em!important; }

这里有一个片段：

按评论编辑：

因为内联样式是从其中一个插件生成的，所以您可以删除它(然后似乎根本不需要css )。我把它放在setInterval上，这样它就能持续了。

​

$('#serviceCategorySearchDropdown').on('click', function () {
   setInterval(function(){ 
     $('.dropdown-menu.category-dropdown-menu.show').removeAttr('style');
   }, 50);  
})

.dropdown-menu.category-dropdown-menu.show {
  /*top: 3em!important;*/
}






/* DESKTOP */


/* Searchbar Container */

.searchbar-container {
  background-color: white;
  padding: 15px 10px;
}

.square-btn-left,
.square-btn-right {
  background-color: #8ABE57;
  color: white;
  height: 45px;
  width: 50px
}

.searchbar-field {
  height: 45px;
  border: 2px solid #eee;
  border-left: none;
  border-right: none;
}

.category-dropdown-menu {
  padding: 0.35rem 1.5rem;
  height: 500px;
  overflow-y: scroll;
}

.category-dropdown-menu li a {
  color: #31353C;
  line-height: 2em;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<div class="input-group">
  <div class="input-group-btn search-panel">
    <button type="button" class="btn dropdown-toggle square-btn-left" data-toggle="dropdown"   id="serviceCategorySearchDropdown">
                            <i class="far fa-list-ul"></i>
                          </button>
    <ul class="dropdown-menu category-dropdown-menu" role="menu"data-placement="top-end">
      <li><a href="#"><i class="fas fa-shovel pr-3"></i>Item 1</a></li>
      <li><a href="#"><i class="fas fa-utensils pr-3"></i>Item 2</a></li>
      <li><a href="#"><i class="fas fa-ruler-triangle pr-3"></i>Item 3</a></li>

    </ul>
  </div>
  <input type="hidden" name="search_param" value="all" id="search_param">
</div>



<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

​

顺便说一下，3em是根据引导.btn类大小计算的.你想怎么改就怎么改。