Hide bootstrap .dropdown-backdrop, CSS only
Is it possible to hide the Bootstrap.dropdown-backdrop element for a specific dropdown (not all on the page) using CSS?
I figured it was possible with Javascript, JSFiddle is here . However, I would like to accomplish this without using additional JS if possible.
<!-- First dropdown: no backdrop -->
<div id="firstDropdown" class="dropdown">
<button class="btn-dropdown-add btn btn-blue" data-toggle="dropdown">
First Dropdown ▼
</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 ▼
</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>
+3
source to share
1 answer
Found a solution: .dropdown-backdrop is a descendant of its .dropdown, which can have a unique id, so just using it display:none;
in CSS works fine, like in:
#firstDropdown .dropdown-backdrop {
display:none;
}
And then all other dropdowns (except for #firstDropdown) will still have a background as usual.
See the JSFiddle for details .
+10
source to share