javascript - 当单击其他按钮的下拉项时，Bootstrap 按钮下拉子元素的类被删除

Question

这是 fiddle .

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

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

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

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

有人可以帮忙吗？

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