Jason Jason - 7 months ago 18
Javascript Question

Selecting new item in bootstrap dropdown doesn't clear previous selection

The following code sample behaves as expected except for one problem. As you can see, I have two menu items, the first of which is a dropdown that lists dates. When making selections within this dropdown, my previous selections remain highlighted. I would like it to behave such that when making a 2nd selection, it removes previous selections. I can probably force the deselection using js/jquery, but suspect there's more Bootstrap friendly way to do this. In fact, I get the proper behavior on the higher level menu.

<ul class="nav nav-pills nav-stacked">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="" role="button" aria-haspopup="true" aria-expanded="false">
Menus&nbsp;
<span class="caret"></span>
</a>
<ul class="dropdown-menu nav nav-pills nav-stacked">
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="tab" href="#">1/8/2016</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="tab" href="#">1/9/2016</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="tab" href="#">1/10/2016</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tab_menu_item2">MenuItem2</a>
</li>
</ul>


Thanks in advance for the help.

After Turnips suggestion to remove the nav from the dropdown, I did so. I'm still having the same problem though. Here's what that section looks like now.

<ul class="dropdown-menu scroll-menu">
<li class="dropdown">
<a data-toggle="tab" href="#">1/8/2016</a>
</li>
<li class="dropdown">
<a data-toggle="tab" href="#">1/9/2016</a>
</li>
<li class="dropdown">
<a data-toggle="tab" href="#">1/10/2016</a>
</li>

Answer

Remove dropdown class from your list.. and why are you adding class navbar-link? :/

   <ul class="dropdown-menu nav nav-pills nav-stacked">
                        <li class="nav-item ">
                            <a class="dropdown-toggle" data-toggle="tab" href="#">1/8/2016</a>
                        </li>
                        <li class="nav-item ">
                            <a class="dropdown-toggle" data-toggle="tab" href="#">1/9/2016</a>
                        </li>
                        <li class="nav-item ">
                            <a class="dropdown-toggle" data-toggle="tab"  href="#">1/10/2016</a>
                        </li>
                    </ul>
Comments