当单击其他按钮的下拉项时，引导按钮下拉子元素的类被删除答案

【问题标题】：Bootstrap button dropdown child element's class is getting removed when clicked on other button's dropdown items当单击其他按钮的下拉项时，引导按钮下拉子元素的类被删除
【发布时间】：2015-10-17 11:14:24
【问题描述】：

这里是fiddle。

我想要做的是使用 Bootstrap 的下拉菜单而不是选择框，并使用列表项而不是选项。从选定列表项中检索并放入其相应按钮元素的数据在单击事件上被赋予一个“活动选择”类（呈现后以蓝色显示）。像这样：

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

单击其他列表项应仅在相应按钮元素内从其他列表项中删除上述类。但是该类也从其他按钮下拉组的选定列表项中删除。像这样：

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

有人可以帮忙吗？

【问题讨论】：

像这样使用.parent 而不是.parents：thisEl.parent('li').siblings().find('a').removeClass('active-select');
jsfiddle.net/sandenay/8powrbfk/3
谢谢大佬...非常感谢您的帮助！..虽然我觉得自己很愚蠢
从长远来看，我会使用.closest()。使用.parent()，您必须严格遵守 DOM 结构。
非常正确...感谢您的建议！

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

出现问题是因为您使用的是parents 而不是parent：

这行代码就是问题所在：

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

改为像这样使用parent：

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

完整的工作代码

	(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>

【讨论】：