javascript - Hide bootstrap's .dropdown-backdrop, CSS only -
is possible hide bootstrap's .dropdown-backdrop element dropdown (not on page) using css only?
i've determined possible using javascript, jsfiddle here. however, accomplish 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 #firstdropdown. // can done js below. can done css? $('#firstdropdown').on('show.bs.dropdown', function () { $(".dropdown-backdrop").hide(); }); </script>
found solution: .dropdown-backdrop descendant of .dropdown, can have unique id, using display:none;
in css works fine, in:
#firstdropdown .dropdown-backdrop { display:none; }
and other dropdowns (except #firstdropdown) still have backdrop normal.
see jsfiddle updated.
Comments
Post a Comment