javascript - Keep Bootstrap Dropdown open in Navbar no matter what - Stack Overflow

admin管理员组

文章数量:1022743

I have a dropdown menu nested in a navbar that I am opening during page load by adding the open class to the li element containing the dropdown menu.

I want this menu to stay open no matter what is clicked or where a user clicks on the page. I have tried different solutions found on Stackoverflow to similar problems, but none of them are working. They all seem to involve stopping the propagation of the click events from closing the menu. I am using bootstrap v3.3.4.

EDIT Here is the menu layout:

<div id="navbar" class="navbar-collapse collapse">
    <ul class="nav navbar-nav">

        <li><a href="#" style="color:white;">menu1</a></li>

        <li class="dropdown open">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" id="catalogmenu" aria-expanded="false" style="color:white;">menu 2 <span class="caret"></span></a>
            <ul class="dropdown-menu" role="menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li class="dropdown-header">Nav header</li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
            </ul>
        </li>

        <li><a href="#" style="color:white;">menu3</a></li>

        <li><a href="#" style="color:white;">menu4</a></li>

        <li><a href="#" style="color:white;">menu5</a></li>
    </ul>
    <div class="navbar-form navbar-right">
        <div class="input-group">
            <input type="text" class="form-control" style="width:310px" placeholder="Search" aria-describedby="basic-addon2">
            <span class="input-group-addon" id="basic-addon2">go</span>
        </div>
    </div>
</div>

Thanks.

EDIT 2 DanDavis suggestion in the ments is the way to go based on my testing. Handling the events and formatting myself is easier in this case than relying on bootstraps native formatting and functionality.

I have a dropdown menu nested in a navbar that I am opening during page load by adding the open class to the li element containing the dropdown menu.

I want this menu to stay open no matter what is clicked or where a user clicks on the page. I have tried different solutions found on Stackoverflow. to similar problems, but none of them are working. They all seem to involve stopping the propagation of the click events from closing the menu. I am using bootstrap v3.3.4.

EDIT Here is the menu layout:

<div id="navbar" class="navbar-collapse collapse">
    <ul class="nav navbar-nav">

        <li><a href="#" style="color:white;">menu1</a></li>

        <li class="dropdown open">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" id="catalogmenu" aria-expanded="false" style="color:white;">menu 2 <span class="caret"></span></a>
            <ul class="dropdown-menu" role="menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li class="dropdown-header">Nav header</li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
            </ul>
        </li>

        <li><a href="#" style="color:white;">menu3</a></li>

        <li><a href="#" style="color:white;">menu4</a></li>

        <li><a href="#" style="color:white;">menu5</a></li>
    </ul>
    <div class="navbar-form navbar-right">
        <div class="input-group">
            <input type="text" class="form-control" style="width:310px" placeholder="Search" aria-describedby="basic-addon2">
            <span class="input-group-addon" id="basic-addon2">go</span>
        </div>
    </div>
</div>

Thanks.

EDIT 2 DanDavis suggestion in the ments is the way to go based on my testing. Handling the events and formatting myself is easier in this case than relying on bootstraps native formatting and functionality.

• javascript
• jquery
• css
• twitter-bootstrap
• twitter-bootstrap-3

Share Improve this question Follow edited Apr 24, 2015 at 16:22 NinjaBomb asked Apr 22, 2015 at 3:45 NinjaBombNinjaBomb 79333 gold badges1313 silver badges2929 bronze badges 1

• 2 copy the CSS rules for open, name them ".open2", and add "open2" to the class of the dropdown; works without scripts. – dandavis Commented Apr 22, 2015 at 3:57

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

This uses only css. working demo

Add a class to the dropdown ul (.stay-open)

<ul class="dropdown-menu stay-open">

then apply style display block with !important

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

I am assuming that you are using a bootstrap dropdown, give this a shot:

$('li.dropdown').on({
    "shown.bs.dropdown": function() { this.close = false; },
    "click":             function() { this.close = true; },
    "hide.bs.dropdown":  function() { return this.close; }
});

The above implementation will hide the dropdown when it is clicked again. If you do not like that behavior, you can simply remove the first two lines (shown.bs.dropdown and click events) and simply return false for hide.bs.dropdown event.

Here is working proof bootply

Here is a working proof bootply that will always stay open

I have a dropdown menu nested in a navbar that I am opening during page load by adding the open class to the li element containing the dropdown menu.

I want this menu to stay open no matter what is clicked or where a user clicks on the page. I have tried different solutions found on Stackoverflow to similar problems, but none of them are working. They all seem to involve stopping the propagation of the click events from closing the menu. I am using bootstrap v3.3.4.

EDIT Here is the menu layout:

<div id="navbar" class="navbar-collapse collapse">
    <ul class="nav navbar-nav">

        <li><a href="#" style="color:white;">menu1</a></li>

        <li class="dropdown open">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" id="catalogmenu" aria-expanded="false" style="color:white;">menu 2 <span class="caret"></span></a>
            <ul class="dropdown-menu" role="menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li class="dropdown-header">Nav header</li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
            </ul>
        </li>

        <li><a href="#" style="color:white;">menu3</a></li>

        <li><a href="#" style="color:white;">menu4</a></li>

        <li><a href="#" style="color:white;">menu5</a></li>
    </ul>
    <div class="navbar-form navbar-right">
        <div class="input-group">
            <input type="text" class="form-control" style="width:310px" placeholder="Search" aria-describedby="basic-addon2">
            <span class="input-group-addon" id="basic-addon2">go</span>
        </div>
    </div>
</div>

Thanks.

EDIT 2 DanDavis suggestion in the ments is the way to go based on my testing. Handling the events and formatting myself is easier in this case than relying on bootstraps native formatting and functionality.

I have a dropdown menu nested in a navbar that I am opening during page load by adding the open class to the li element containing the dropdown menu.

I want this menu to stay open no matter what is clicked or where a user clicks on the page. I have tried different solutions found on Stackoverflow. to similar problems, but none of them are working. They all seem to involve stopping the propagation of the click events from closing the menu. I am using bootstrap v3.3.4.

EDIT Here is the menu layout:

<div id="navbar" class="navbar-collapse collapse">
    <ul class="nav navbar-nav">

        <li><a href="#" style="color:white;">menu1</a></li>

        <li class="dropdown open">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" id="catalogmenu" aria-expanded="false" style="color:white;">menu 2 <span class="caret"></span></a>
            <ul class="dropdown-menu" role="menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li class="dropdown-header">Nav header</li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
            </ul>
        </li>

        <li><a href="#" style="color:white;">menu3</a></li>

        <li><a href="#" style="color:white;">menu4</a></li>

        <li><a href="#" style="color:white;">menu5</a></li>
    </ul>
    <div class="navbar-form navbar-right">
        <div class="input-group">
            <input type="text" class="form-control" style="width:310px" placeholder="Search" aria-describedby="basic-addon2">
            <span class="input-group-addon" id="basic-addon2">go</span>
        </div>
    </div>
</div>

Thanks.

EDIT 2 DanDavis suggestion in the ments is the way to go based on my testing. Handling the events and formatting myself is easier in this case than relying on bootstraps native formatting and functionality.

• javascript
• jquery
• css
• twitter-bootstrap
• twitter-bootstrap-3

Share Improve this question Follow edited Apr 24, 2015 at 16:22 NinjaBomb asked Apr 22, 2015 at 3:45 NinjaBombNinjaBomb 79333 gold badges1313 silver badges2929 bronze badges 1

• 2 copy the CSS rules for open, name them ".open2", and add "open2" to the class of the dropdown; works without scripts. – dandavis Commented Apr 22, 2015 at 3:57

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

This uses only css. working demo

Add a class to the dropdown ul (.stay-open)

<ul class="dropdown-menu stay-open">

then apply style display block with !important

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

I am assuming that you are using a bootstrap dropdown, give this a shot:

$('li.dropdown').on({
    "shown.bs.dropdown": function() { this.close = false; },
    "click":             function() { this.close = true; },
    "hide.bs.dropdown":  function() { return this.close; }
});

The above implementation will hide the dropdown when it is clicked again. If you do not like that behavior, you can simply remove the first two lines (shown.bs.dropdown and click events) and simply return false for hide.bs.dropdown event.

Here is working proof bootply

Here is a working proof bootply that will always stay open

本文标签： javascriptKeep Bootstrap Dropdown open in Navbar no matter whatStack Overflow