Question

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

我想要并且运作良好（所有代码将在稍后）。然后我想创建一些子菜单，当我点击第二个选项时出现：“Fiche”。经过一些研究后，我发现我可以使用bootstrap navbar这样做：

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

这部分......不起作用，首先是因为它关闭如果我点击某处但它没有关闭子菜单，我不知道如何正确地做到这一点，我已经尝试过了。 attr并尝试删除手动引导属性，但它似乎不是一个很好的方法。所以我将发布实际代码，除了子菜单关闭之外大致工作（另外，我对这个社区很新，我还在测试如何做一个正确的帖子，所以希望我已经提供了足够的信息）在片段上它似乎不起作用，可能是因为引导湖可能导致我的配置不同：

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

实际上答案很简单＆＃34;但之前需要一些东西。

首先我有一些JS版本的问题，我纠正了希望是那个（因为我无法在我想要的元素上使用.collapse）但是后来我明白它必须应用于{{1}随着崩溃的内容，所以它工作得更好！

所以我不得不用那个替换我的javascript：

<div>

Bootstrap关闭主下拉关闭的子下拉列表

1 个答案: