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

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已更新。