哪个元素会影响我的jquery下拉菜单的位置-->使其正确运行

Which element effects the positioning of my jquery drop-down menu --> making it go right

本文关键字：运行 位置 元素 影响 我的 下拉菜单 jquery      更新时间：2023-09-26

一段时间以来，我一直在使用下拉jquery检查列表。不过，出于某些样式目的，我想使列表不下拉，而是将其折叠/向右移动。

我尝试了几件事（在我的 css 中）来完成此操作，但到目前为止似乎没有任何效果，我只是找不到影响菜单下拉菜单的正确元素。或者也许这是jquery处理的，但我真的看不到jquery这样做。

这是下拉列表的 html： 

<form method="post">
<div id="list1" class="dropdown-check-list">
        <span class="anchor">Select the country in which the event takes place</span>
        <ul class="items">
              <li><input type="checkbox" name="columns_location[]" value="Belgium" />Belgium</li>
              <li><input type="checkbox" name="columns_location[]" value="Denmark" />Denmark</li>
              <li><input type="checkbox" name="columns_location[]" value="England" />England</li> 
              <li><input type="checkbox" name="columns_location[]" value="France" />France</li>  
              <li><input type="checkbox" name="columns_location[]" value="Germany" />Germany</li>  
              <li><input type="checkbox" name="columns_location[]" value="Italy" />Italy</li> 
              <li><input type="checkbox" name="columns_location[]" value="Netherlands" />Netherlands</li>  
              <li><input type="checkbox" name="columns_location[]" value="Poland" />Poland</li>
              <li><input type="checkbox" name="columns_location[]" value="Romania" />Romania</li>
              <li><input type="checkbox" name="columns_location[]" value="Scotland" />Scotland</li>
              <li><input type="checkbox" name="columns_location[]" value="Spain" />Spain</li>
              <li><input type="checkbox" name="columns_location[]" value="Sweden" />Sweden</li>
              <li><input type="checkbox" name="columns_location[]" value="Other" />Other</li>
              <li><input type="checkbox" class="select-all" id="select-all" value="Select/deselect all"/>Select/deselect all</li>  
        </ul>
    </div>
    <div id="list2" class="dropdown-check-list">
        <span class="anchor">Select type of Event</span>
        <ul class="items">
              <li><input type="checkbox" name="columns_type[]" value="Symposium" />Symposium</li>
              <li><input type="checkbox" name="columns_type[]" value="Round table" />Round table</li>
              <li><input type="checkbox" name="columns_type[]" value="Meeting" />Meeting</li> 
              <li><input type="checkbox" name="columns_type[]" value="Conference" />Conference</li> 
              <li><input type="checkbox" name="columns_type[]" value="Site visit" />Site visit</li> 
              <li><input type="checkbox" name="columns_type[]" value="Debate" />Debate</li> 
              <li><input type="checkbox" name="columns_type[]" value="Other" />Other</li> 
              <li><input type="checkbox" class="select-all" id="select-all" value="Select/deselect all"/>Select/deselect all</li>
        </ul>
    </div>  
<input type="submit" name="go" value="Submit"/>
</form>

这是下拉列表的 CSS：

.dropdown-check-list {
  display: inline-block;
  padding: 0px 10px 20px 0px;
}
.dropdown-check-list .anchor {
  position: relative;
  cursor: pointer;
  display: inline-block;
  padding: 5px 50px 5px 10px;
  border: 1px solid #ccc;
}
.dropdown-check-list .anchor:after {
  position: absolute;
  content: "";
  border-left: 2px solid black;
  border-top: 2px solid black;
  padding: 5px;
  right: 10px;
  top: 20%;
  -moz-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
}
.dropdown-check-list .anchor:active:after {
  right: 8px;
  top: 21%;
}
.dropdown-check-list ul.items {
  padding: 2px;
  display: none;
  margin: 0;
  border: 1px solid #ccc;
  border-top: none;
}
.dropdown-check-list ul.items li {
  list-style: none;
}
.dropdown-check-list.visible .anchor {
  color: #0094ff;
}
.dropdown-check-list.visible .items {
  display: block;
}

这是javascript/jquery代码：

 $('.select-all').click(function (event) {
    var $list = $(this).closest('.dropdown-check-list');
    $list.find(':checkbox').prop('checked', $(this).prop('checked'));
});
$('.dropdown-check-list .anchor').click(function(){
    $(this).closest('.dropdown-check-list').toggleClass("visible");
});

我也尝试影响 css 中的旋转度数，但这只会影响符号（箭头）。

希望有人能为我指出正确的方向，提前谢谢！

据我了解，您希望下拉列表向右打开而不是直接向中心打开，为此，为 ul 和下拉窗口本身分配边距。

即： 

.dropddownBox {
  margin-left: 50px; 
}

在您的 CSS 中，将下拉菜单推送到右侧。左边也是如此，如果需要，您可以创建一个负左边距以将其推向左侧。

编辑：我注意到它击落了 jsfiddle 中包含的下拉菜单和按钮，所以我对其进行了一些修改以确保它不会这样做，您可以这样做：

.dropddownBox {
  position: absolute;
  z-index: 10;
  margin-left: 50px; 
}

我设置 z 索引只是为了确保它显示在其他div 等上方，如果它确实重叠。

相关文章：