javascript - 哪个元素影响我的 jquery 下拉菜单的定位 --> 使其正确

Question

一段时间以来，我一直在使用下拉式 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 中的旋转度数，但这只会影响符号(箭头)。

我希望有人能指出我正确的方向，在此先感谢您!

Answer 1

据我了解，您希望下拉菜单向右打开而不是直接向中心打开，以实现此目的，为 ul 和下拉窗口本身分配边距。

即:

.dropddownBox {
  margin-left: 50px; 
}

在您的 CSS 中，将为您将下拉菜单推向右侧。左边也一样，如果你愿意，你可以创建一个负的左边距将它推到左边。

编辑:我注意到它击落了 jsfiddle 中包含的下拉菜单和按钮，所以我对其进行了一些修改以确保它不会执行此操作:

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

我设置 z-index 只是为了确保它显示在其他 div 之上，如果它确实重叠的话。