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>

单击其他按钮的下拉项时，Bootstrap按钮下拉列表子元素的类将被删除

1 个答案: