DROPDOWN not want to stay open

Question

hello everyone I would like to ask for help because my dropdown is in trouble, as you can see in the link below , it has two tabs , the problem is when you have to change page to see the contents of the one in question , but when you try page to change the dropdown closes. Who can help ? Link:https://jsfiddle.net/f0yzyryL/<i>please help</i>

@arun-p-johny I guess he don't know which code is in question. as said already by `jf-it` - you need to stop bubbling when click on tab happens — llamerr, Mar 14 '16 at 11:27
Take a look here: http://stackoverflow.com/questions/25089297/twitter-bootstrap-avoid-dropdown-menu-close-on-click-inside — Андрій Грін, Mar 14 '16 at 11:35
Possible duplicate of [Twitter Bootstrap Dropdown with Tabs inside](http://stackoverflow.com/questions/21525440/twitter-bootstrap-dropdown-with-tabs-inside) — Borys Serebrov, Mar 14 '16 at 11:37

score 2 · Answer 1 · answered Mar 14 '16 at 11:33

2

Use this code:

$(".nav li").click(function() {
  $(".dropdown-menu").addClass("nav-open");
});

Add this css:

.nav-open {
  display: block !important;
}

here is a link: https://jsfiddle.net/vexqhyb9/1/

answered Mar 14 '16 at 11:33

Johncena365

146
3

score 1 · Accepted Answer · answered Mar 14 '16 at 11:35

https://jsfiddle.net/9tywtn6z/

Added js variant from http://getbootstrap.com/javascript/#tabs-usage

instead of http://getbootstrap.com/javascript/#markup

$('#tabs a').click(function (e) {
  e.preventDefault()
  $(this).tab('show');
  return false;
})

and removed data-toggle="tab" attr

(or you can use http://getbootstrap.com/javascript/#tabs-events to prevent bubbling)

return false; preventing bubbling in jquery - https://css-tricks.com/return-false-and-prevent-default/

DROPDOWN not want to stay open

2 Answers2