When clicking on the dropdown items of another button, the class of the child element in the Bootstrap button dropdown is being removed

Question

When clicking on the dropdown items of another button, the class of the child element in the Bootstrap button dropdown is being removed

Check out the JSFiddle for this code snippet.

I'm attempting to implement Bootstrap's drop-down menu using list items instead of options. When a list item is selected, the data should be retrieved and displayed as an active selection within a button element by adding the class 'active-select'. Here is an example:

<li><a href="#" class="active-select">New York<a><li>

The issue I'm encountering is that when clicking on other list items, the 'active-select' class is removed not only from the corresponding button but also from list items in other button drop-down groups. It looks like this:

<li><a href="#" class>New York<a><li>

If anyone has a solution or can offer some assistance, it would be greatly appreciated!

javascript jquery html css twitter-bootstrap

Answer 1

Answer №1

The issue arises because the code is utilizing parents instead of parent:

This specific line of code is causing the problem:

thisEl.parents('li').siblings().find('a').removeClass('active-select'); // parents targets all li's above `a` and hence siblings afterwards targets other drop-downs.

To resolve this, it is recommended to use parent in the following manner:

thisEl.parent('li').siblings().find('a').removeClass('active-select');

Full operational code snippet

(function () {
var search_btn = $('.select-style').find('button.btn-inverse'),
selectOptions = $('.select-style ul.dropdown-menu li').find('a');

selectOptions.on('click', function (e) {
e.preventDefault();

var thisEl = $(this);
var getTextData = thisEl.text();

thisEl.addClass('active-select');
            // Use .parent and not .parents
thisEl.parent('li').siblings().find('a').removeClass('active-select');

thisEl.parents('.btn-group').find('button[type=button]').html( getTextData );
});
}) ();

ul.homeInputBaropenState { list-style-type: none; width: 500px; }
ul.homeInputBaropenState li { display: inline;  }
ul.homeInputBaropenState li a.active-select { color: blue; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<ul class="select-Section homeInputBaropenState">
                <li class="select-style">
                    <div class="btn-group">
                        <button type="button" class="btn btn-inverse dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Select City
                        </button>

                        <ul class="dropdown-menu">
                            <li><a href="#">New York</a></li>
                            <li><a href="#">San Fransisco</a></li>
                            <li><a href="#">Los Angeles</a></li>
                            <li><a href="#">Detroit</a></li>
                        </ul>
                    </div>
                </li> 

                <li class="select-style">
                    <div class="btn-group">
                        <button type="button" class="btn btn-inverse dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Select Type 
                        </button>
                    
                        <ul class="dropdown-menu">
                            <li><a href="#">Men</a></li>
                            <li><a href="#">Women</a></li>
                            <li><a href="#">Kids</a></li>
                        </ul>
                    </div>
                </li>

                <div class="clearfix"></div>
            </ul>

Answer 2

The issue arises because the code is utilizing parents instead of parent:

This specific line of code is causing the problem:

thisEl.parents('li').siblings().find('a').removeClass('active-select'); // parents targets all li's above `a` and hence siblings afterwards targets other drop-downs.

To resolve this, it is recommended to use parent in the following manner:

thisEl.parent('li').siblings().find('a').removeClass('active-select');

Full operational code snippet

(function () {
var search_btn = $('.select-style').find('button.btn-inverse'),
selectOptions = $('.select-style ul.dropdown-menu li').find('a');

selectOptions.on('click', function (e) {
e.preventDefault();

var thisEl = $(this);
var getTextData = thisEl.text();

thisEl.addClass('active-select');
            // Use .parent and not .parents
thisEl.parent('li').siblings().find('a').removeClass('active-select');

thisEl.parents('.btn-group').find('button[type=button]').html( getTextData );
});
}) ();

ul.homeInputBaropenState { list-style-type: none; width: 500px; }
ul.homeInputBaropenState li { display: inline;  }
ul.homeInputBaropenState li a.active-select { color: blue; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<ul class="select-Section homeInputBaropenState">
                <li class="select-style">
                    <div class="btn-group">
                        <button type="button" class="btn btn-inverse dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Select City
                        </button>

                        <ul class="dropdown-menu">
                            <li><a href="#">New York</a></li>
                            <li><a href="#">San Fransisco</a></li>
                            <li><a href="#">Los Angeles</a></li>
                            <li><a href="#">Detroit</a></li>
                        </ul>
                    </div>
                </li> 

                <li class="select-style">
                    <div class="btn-group">
                        <button type="button" class="btn btn-inverse dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Select Type 
                        </button>
                    
                        <ul class="dropdown-menu">
                            <li><a href="#">Men</a></li>
                            <li><a href="#">Women</a></li>
                            <li><a href="#">Kids</a></li>
                        </ul>
                    </div>
                </li>

                <div class="clearfix"></div>
            </ul>

When clicking on the dropdown items of another button, the class of the child element in the Bootstrap button dropdown is being removed

Answer №1

Similar questions

What could be the reason for the malfunction of the "includes" function in my JavaScript snake game

Guide on importing CDN Vue into a vanilla Typescript file without using Vue CLI?

Adding padding-top to the h1 element within a vertically aligned div

Why is the Get request for fetching data not returning multiple parameters, but only returning a single one in Vuex?

CSS3 blending modes

Simple method for extracting data from JSON and saving it into an array with jQuery

The issue with the material design checkbox change functionality not functioning as expected

Having trouble with Javascript fetch() not receiving the correct JSON data from the local server

Encountering an issue when attempting to import a non-source module from a node library while running a Typescript script

Tips for creating a line break within a Bootstrap progress bar when the text exceeds the width of a div

"Bordering with Rounded Edges: A CSS Styling

Sending Ajax data with an extra parameter

Blog HTML Editing Tool

transferring data from JavaScript to PHP variables

Angular UI Router allows for the resolution of data before a state

What is the reason for the checkboxes in vuejs not being rendered with the checked attribute set

Crafting a trail of breadcrumbs using AngularJS

"Learn how to implement a dropdown menu using Vue.js and Quasar on Cloud Firebase

The vanishing HTML Div with a fixed height

Display dropdown with multiple lists using LocalStorage