琐碎的JavaScript / Bootstrap下拉问题

Trivial JavaScript / Bootstrap dropdown issue

本文关键字:问题 Bootstrap JavaScript      更新时间:2023-09-26

基本上我有 3 个下拉菜单,我只需要一个就可以激活,这样当我从中选择某些内容时,其余的也应该变得活跃。所以到目前为止,我所做的是我添加了禁用类,现在我激活了第一个,而其余 3 个 - 禁用。我的问题是 - 如何在我从第一个下拉列表中选择某些内容后立即使它们处于活动状态

 $(document).ready(function () {
        $('#Test #firstId .dropdown-menu li a').click(function () {
            var selText = $(this).text();
            $(this).parents('.btn-group').find('.dropdown-toggle').html(selText + ' <span class="caret"></span>')
        });
        $('#Test #secondId .dropdown-menu li a').click(function () {
            var selText = $(this).text();
            $(this).parents('.btn-group').find('.dropdown-toggle').html(selText + ' <span class="caret"></span>')
        });
        $('#Test #thirdId .dropdown-menu li a').click(function () {
            var selText = $(this).text();
            $(this).parents('.btn-group').find('.dropdown-toggle').html(selText + ' <span class="caret"></span>')
        });
        $('#Test #fourthId .dropdown-menu li a').click(function () {
            var selText = $(this).text();
            $(this).parents('.btn-group').find('.dropdown-toggle').html(selText + ' <span class="caret"></span>')
        });
    });

这是我的下拉菜单:

 <div class="btn-group" id="firstId">
                            <button class="btn btn-default dropdown-toggle" type="button"
                                    data-toggle="dropdown">
                                Store
                                <span class="caret"></span></button>
                            <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
                                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">1</a></li>
                                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">2</a></li>
                                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">3</a>
                                </li>
                                <li role="presentation" class="divider"></li>
                                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">About Us</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="dropdown">
                        <div class="btn-group" id="secondId">
                            <button class="btn btn-default dropdown-toggle disabled" type="button"
                                    data-toggle="dropdown">
                                Catalog
                                <span class="caret"></span></button>
                            <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
                                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">1</a></li>
                                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">2</a></li>
                                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">3</a>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="dropdown">
                        <div class="btn-group" id="thirdId">
                            <button class="btn btn-default dropdown-toggle disabled" type="button"
                                    data-toggle="dropdown">
                                Categories
                                <span class="caret"></span></button>
                            <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
                                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">1</a></li>
                                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">2</a></li>
                                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">3</a>
                                </li>
                                <li role="presentation" class="divider"></li>
                                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">4</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="dropdown">
                        <div class="btn-group" id="fourthId">
                            <button class="btn btn-default dropdown-toggle disabled" type="button"
                                    data-toggle="dropdown">
                                Products
                                <span class="caret"></span></button>
                            <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
                                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">1</a></li>
                                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">2</a></li>
                                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">3</a>
                                </li>
                                <li role="presentation" class="divider"></li>
                                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">4</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

JQUERY

 $('#firstId ul.dropdown-menu li').on('click',function(){
    $('.btn.btn-default.dropdown-toggle.disabled').removeClass('disabled');
    });

在第一个 ID 上,选择查找所有已禁用的类并删除禁用的类

JSFIDDLE 演示