可以'重新打开由 jQuery 关闭的下拉菜单

Posted 2023-05-08

【中文标题】可以\'重新打开由 jQuery 关闭的下拉菜单

【英文标题】：Can' reopen drop-menu closed by jQuery可以'重新打开由 jQuery 关闭的下拉菜单

【发布时间】：2017-02-14 08:15:19

【问题描述】：

我不明白为什么如果我通过 jQuery 关闭下拉菜单，然后我无法通过单击按钮重新打开它。

下拉菜单的代码：

                   <div class="btn-group">
                   <button type="button" id="BtPeriod" class="btn btn-primary btn-sm brd-rad-0 dropdown-toggle" data-toggle="dropdown">
                       <i class="fa fa-area-chart"></i><span class="pad-20">15 last days</span><span class="caret"></span>
                   </button>
                   <div class="dropdown-menu pull-right pad-20 bor-g-1" style="width:420px;">
                       <div class="fnt-1-5 pad-b-20 brd-rad-6"><i class="fa fa-area-chart pad-r-20"></i>Timelaps of Lines Charts</div>
                       <div class="row">
                           <div class="col-xs-6"><button type="button" id="BtLast15days" class="btn btn-grey brd-rad-0 btn-block">15 last days</button></div>
                           <div class="col-xs-6"><button type="button" id="BtCurrentMonth" class="btn btn-grey brd-rad-0 btn-block">The current month</button></div>
                       </div>
                   </div>
               </div>

关闭它的 jQuery 代码：

    $("#BtCurrentMonth").on("click", function(event) 
if(!$("#BtCurrentMonth").hasClass("disabled")) 
    if(isMobile.any() == null) parent.NProgress.start() ;
    $("#BtPeriod").html("<i class='fa fa-area-chart'></i><span class='pad-20'>The current month</span><i class='fa fa-spinner fa-spin fa-lg'></i>") ;
    //$(".dropdown-menu").hide() ;
    //$("#BtPeriod").prop("disabled", true) ;
    //$(".dropdown-menu").slideUp("fast") ;
    $("#IfAccountsChart").attr("src", "http://localhost/dev.sublime-art.com/sublime-admin/pages/adminhome/iframes/if_accounts_charts.php?period=onemonth") ;

);

如果我取消注释这 3 种关闭下拉菜单的方式之一，我会发现自己的下拉菜单无法重新打开。

知道为什么吗？ 谢谢:)

编辑

$(".btn-group").removeClass("open"); 

像魅力一样工作:)

【问题讨论】：

你有打开它的代码吗？

不，我没有。没想到我需要它，因为它会在第一次点击 #BtPeriod 时打开。

所以我完全理解了这个问题，你点击按钮，它打开（这段代码在哪里？），你再次点击按钮，它关闭，然后你第三次点击按钮而且打不开？

是的，由于 bootstrap dropdow-menu 默认行为，打开工作正常，例如：w3schools.com/bootstrap/…。但是当添加一些 jQuery 时，默认行为不再起作用了。

看起来您根本不需要任何关闭代码。 Bootstrap 似乎正在为您处理它。

【参考方案1】：

Bootstrap 在您的下拉列表中添加和删除“打开”类，隐藏/显示功能在 css 中完成。因此，您的代码以类无法显示菜单的方式隐藏菜单。

您似乎不需要任何代码来关闭它，因为 Bootstrap 会为您处理，但如果必须，请尝试：

$(".dropdown-menu").removeClass("open");

这应该可以解决问题。

【讨论】：

在$(".btn-group").removeClass("open"); 上工作就像一个魅力:)