Question

是否可以通过仅使用CSS隐藏Bootstrap的.dropdown-backdrop元素以获取某个下拉列表（并非全部在页面上）？

我已经确定使用Javascript和JSFiddle here可以实现这一点。但是，如果可能的话，我想在不使用额外JS的情况下完成此任务。

<!-- First dropdown: no backdrop -->
<div id="firstDropdown" class="dropdown">
    <button class="btn-dropdown-add btn btn-blue" data-toggle="dropdown">
        First Dropdown &#x25BC;
    </button>
    <ul class="dropdown-menu" role="menu">
        <li><a class="a_dropdown_item" href="#business">Business</a></li>
        <li><a class="a_dropdown_item" href="#my-events">Event</a></li>
    </ul>
</div>

<!-- Second dropdown: yes backdrop -->
<div id="secondDropdown" class="dropdown">
    <button class="btn-dropdown-add btn btn-blue" data-toggle="dropdown">
        Second Dropdown &#x25BC;
    </button>
    <ul class="dropdown-menu" role="menu">
        <li><a class="a_dropdown_item" href="#business">Business</a></li>
        <li><a class="a_dropdown_item" href="#my-events">Event</a></li>
    </ul>
</div>

<script type="text/javascript">
    // Hide backdrop from #firstDropdown.
    // This can be done with JS as below. Can it be done with only CSS?
    $('#firstDropdown').on('show.bs.dropdown', function () {
      $(".dropdown-backdrop").hide();
    });
</script>

Answer 1

找到解决方案：。dropdown-backdrop是其.dropdown的后代，它可以有一个唯一的ID，因此在CSS中使用display:none;工作正常，如：

#firstDropdown .dropdown-backdrop {
    display:none;
}

然后所有其他下拉菜单（#firstDropdown除外）仍然会有正常的背景。

请参阅JSFiddle已更新。

隐藏bootstrap的.dropdown-backdrop，仅限CSS

1 个答案: