현재 ASP.NET 응용 프로그램에서 부트 스트랩 메뉴를 작업 중입니다. 이를 위해, 나 자신에 의해 네비게이션 바에을했고, 내가 버튼을 클릭하면, 그와 같은 메뉴를 보여줍니다 : 내가 원한과 (모든 코드가 나중에있을 것입니다) 잘 작동부트 스트랩 닫기 메인 드롭 다운에서 서브 드롭 다운
합니다. 그런 다음 두 번째 선택 항목 인 "Fiche"를 클릭하면 나타나는 하위 메뉴를 만들고 싶습니다. 그래서 몇 가지 조사 후, 나는이 같은 부트 스트랩 네비게이션 바 함께 할 수있는 것을 발견 :
내가 원하는 거의 무슨 그! (보기 흉한 것을 제외하고 나는 그것을 더 잘 보이게하는 방법을 모른다. 그러나 그것은 또 다른 문제이다.) 그러나 그 다음 내가 원하는 것은 나의 메뉴보다 다른 곳을 클릭 할 때 모든 메뉴가 사라지고 그 때 다시 열려면 클릭하십시오. 이전에 여는 하위 메뉴는 다시 표시되지 않습니다 (기본적으로 모든 항목을 닫으려고합니다).
이 부분은 작동하지 않습니다. 왜냐하면 처음에는 닫히기 때문입니다. 어딘가를 클릭해도 하위 메뉴가 닫히지 않고 어떻게 올바르게 수행 할 수 있는지 모르겠지만 이미 사용하려고했습니다. .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
{
\t background-color: #00448a;
\t width: 100%;
\t height: 60px;
padding-top: 15px;
}
\t \t \t \t
.menu-btn
{
\t margin-left: 2%;
\t height: 75%;
\t width: 40px;
\t max-width: 40px;
\t display: inline-block;
}
\t \t \t
.span-menu
{
\t width: 100%;
\t height: 20%;
\t margin-bottom:10%;
\t background-color: white;
\t border-radius: 5px;
}
\t \t \t
.dropdown-content
{
\t display: none;
\t position: absolute;
\t background-color: #219cdc;
\t min-width: 160px;
\t box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
\t color: white;
\t border-radius: 5px;
\t top: 60px;
z-index: 1000 !important;
}
\t \t \t
.dropdown-content a
{
\t color: white;
\t padding: 12px 16px;
\t text-decoration: none;
\t display: block;
}
\t \t \t
.dropdown-content a:hover {color: black; background-color:white;}
\t \t \t
.show {display:block;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav class="top-navbar">
\t \t \t <a class="menu-btn immune-nav-close" href="javascript:void(0);" style="font-size:15px;" onclick="myFunction()">
\t \t \t \t <div class="span-menu immune-nav-close"></div>
\t \t \t \t <div class="span-menu immune-nav-close"></div>
\t \t \t \t <div class="span-menu immune-nav-close"></div>
\t \t \t </a>
\t \t \t <div id="myDropdown" class="dropdown-content">
\t \t \t \t <a href="/Default.aspx">Accueil</a>
\t \t \t \t <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>
\t \t \t \t <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>
\t \t \t </div>
</nav>자세한 정보가 필요한 경우 요청 무료 떨어졌다! 귀하의 도움에 미리 감사드립니다.