Bootstrap 在主下拉关闭时关闭子下拉

Question

我目前正在 ASP.NET 应用程序的 bootstrap 菜单上工作。为此，我自己做了一个导航栏，当我点击按钮时，它会显示这样的菜单：

我想要并且工作得很好（所有代码将在稍后）。然后我想创建一些子菜单，当我点击第二个选项时会出现这些子菜单："Fiche"。所以经过一些研究，我发现我可以像这样使用 bootstrap 导航栏来做到这一点：

这几乎就是我想要的！（除了它很丑而且我不知道如何让它看起来更好，但这是另一个问题。）但是我想要的是，当我点击菜单以外的其他地方时，所有菜单都会消失，当我再次点击打开它时，它不会再次显示我之前打开的子菜单（基本上，我想关闭所有).

这部分...不起作用，首先是因为它会关闭使用 .attr 并尝试手动删除 bootstrap 属性，但这似乎不是一个好方法。所以我将 post 实际代码，除了子菜单关闭外，它大致可以工作（另外，我对这个社区很陌生，我仍在测试如何做一个正确的 post，所以希望我已经提供了足够的信息）在代码片段上它似乎不起作用，可能是因为 bootstrap 湖导致我的配置不同：

function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown menu if the user clicks outside of it
window.onclick = function (event) {
    if (!event.target.matches('.immune-nav-close')) {
        var dropdowns = document.getElementsByClassName("dropdown-content");
        var i;
        for (i = 0; i < dropdowns.length; i++) {
            var openDropdown = dropdowns[i];
            if (openDropdown.classList.contains('show')) {
                openDropdown.classList.remove('show');
            }
        }
    }
}

.well
{
    background-color: #219cdc !important;
}

.top-navbar
{
 background-color: #00448a;
 width: 100%;
 height: 60px;
    padding-top: 15px;
}
    
.menu-btn
{
 margin-left: 2%;
 height: 75%;
 width: 40px;
 max-width: 40px;
 display: inline-block;
}
   
.span-menu
{
 width: 100%;
 height: 20%;
 margin-bottom:10%;
 background-color: white;
 border-radius: 5px;
}
   
.dropdown-content 
{
 display: none;
 position: absolute;
 background-color: #219cdc;
 min-width: 160px;
 box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 color: white;
 border-radius: 5px;
 top: 60px;
    z-index: 1000 !important;
}
   
.dropdown-content a 
{
 color: white;
 padding: 12px 16px;
 text-decoration: none;
 display: block;
}
   
.dropdown-content a:hover {color: black; background-color:white;}
   
.show {display:block;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav class="top-navbar">
   <a class="menu-btn immune-nav-close" href="javascript:void(0);" style="font-size:15px;" onclick="myFunction()">
    <div class="span-menu immune-nav-close"></div>
    <div class="span-menu immune-nav-close"></div>
    <div class="span-menu immune-nav-close"></div>
   </a>
   <div id="myDropdown" class="dropdown-content">
    <a href="/Default.aspx">Accueil</a>
    <a class="immune-nav-close" data-toggle="collapse" href="#collapseFiche" aria-expanded="false" aria-controls="collapseFiche">
                    Fiches
                </a>
                <div class="collapse ddown-nav" id="collapseFiche">
                    <div class="well">
                      <a href="/SaisieFiche.aspx">Saisir une fiche</a>
                      <a href="/MyFiches.aspx">Mes fiches</a>
                    </div>
                </div>
    <a href="/Approbation.aspx">Approbations</a>
                <a href="/Validation.aspx">Validation RH</a>
                <a class="immune-nav-close" data-toggle="collapse" href="#collapseExport" aria-expanded="false" aria-controls="collapseExport">
                    Exportations
                </a>
                <div class="collapse ddown-nav" id="collapseExport">
                    <div class="well">
                        <a href="/Synthese.aspx">Synthèse</a>
                        <a href="/Monthly.aspx">Bilan Mensuel</a>
                        <a href="/Personnal.aspx">Bilan Personnel</a>
                    </div>
                </div>
                <a class="immune-nav-close" data-toggle="collapse" href="#collapseSetting" aria-expanded="false" aria-controls="collapseSetting">
                    Configuration
                </a>
                <div class="collapse ddown-nav" id="collapseSetting">
                    <div class="well">
                        <a href="/Config_pays.aspx">Paramétrage Pays</a>
                        <a href="/Config_csp.aspx">Paramétrage Catégories Socio-Professionnelles</a>
                    </div>
                </div>
   </div>
        </nav>

如果需要更多信息，请随意询问！预先感谢您的帮助。

Answer 1

其实答案很"simple"但之前需要一些东西。

首先我遇到了一些 JS 版本问题，我希望它是正确的（因为我不能在我想要的元素上使用 .collapse）但后来我明白它必须应用于 <div> 加上内容崩溃等效果好多了！

所以我只需要将我的 javascript 替换为：

window.onclick = function (event) {
    if (!event.target.matches('.immune-nav-close')) {
        var dropdowns = document.getElementsByClassName("dropdown-content");
        var i;
        for (i = 0; i < dropdowns.length; i++) {
            var openDropdown = dropdowns[i];
            if (openDropdown.classList.contains('show')) {
                openDropdown.classList.remove('show');
            }
        }

        $('.ddown-nav').collapse('hide')
    }
}

Bootstrap 在主下拉关闭时关闭子下拉

Bootstrap Close Subdropdown on main dropdown closure

html

javascript

css

navbar

twitter-bootstrap