부트스트랩 드롭다운 하위 메뉴 누락

부트스트랩 드롭다운 하위 메뉴 누락

부트스트랩 3은 아직 RC에 있지만, 저는 그것을 구현하려고 했습니다.하위 메뉴 클래스를 어떻게 배치해야 하는지 알 수 없었습니다.심지어 css에는 수업이 없고 심지어 새로운 문서들도 그것에 대해 아무 말도 하지 않습니다.

클래스 이름이 드롭다운-하위 메뉴인 2.x에 있었습니다.

부트스트랩 5(2023 업데이트)

상위 드롭다운이 열려 있을 때 하위 메뉴가 닫히지 않도록 JavaScript를 추가합니다.이 작업은 토글로 전환할 수 있습니다.display:block...

let dropdowns = document.querySelectorAll('.dropdown-toggle')
dropdowns.forEach((dd)=>{
    dd.addEventListener('click', function (e) {
        var el = this.nextElementSibling
        el.style.display = el.style.display==='block'?'none':'block'
    })
})

부트스트랩 5 멀티 레벨 드롭다운 - 클릭
부트스트랩 5 멀티 레벨 드롭다운 - 호버
부트스트랩 5 멀티 레벨 드롭다운 - 호버 및 애니메이션 전환

또는 Navbar 드롭다운에 대해 이 CSS 전용 메서드를 사용할 수 있습니다.

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -1px;
}

.navbar-nav li:hover > ul.dropdown-menu {
    display: block;
}

부트스트랩 5 Navbar 드롭다운 호버 하위 메뉴(CSS에만 해당)

---

부트스트랩 4(2018년 업데이트)

그dropdown-submenu부트스트랩 3 RC에서 제거되었습니다.부트스트랩 작가 마크 오토의 말에 따르면..

"하위 메뉴는 현재 웹, 특히 모바일 웹에서 많은 위치를 차지하고 있지 않습니다.3.0"으로 제거됩니다. - https://github.com/twbs/bootstrap/pull/6342

그러나 약간의 추가 CSS를 사용하면 동일한 기능을 얻을 수 있습니다.

마우스 커서의 navbar 하위 메뉴:

.navbar-nav li:hover > ul.dropdown-menu {
    display: block;
}
.dropdown-submenu {
    position:relative;
}
.dropdown-submenu>.dropdown-menu {
    top:0;
    left:100%;
    margin-top:-6px;
}

Navbar 하위 메뉴 드롭다운 호버
Navbar 하위 메뉴 드롭다운 호버(오른쪽 정렬)
Navbar 하위 메뉴 드롭다운 클릭(오른쪽 정렬)
Navbar 드롭다운 호버(하위 메뉴 없음)

---

부트스트랩 3

다음은 부트스트랩 3을 사용하는 예입니다. https://codeply.com/p/T9FWGhhL0S

CSS

.dropdown-submenu {
    position:relative;
}
.dropdown-submenu>.dropdown-menu {
    top:0;
    left:100%;
    margin-top:-6px;
    margin-left:-1px;
    -webkit-border-radius:0 6px 6px 6px;
    -moz-border-radius:0 6px 6px 6px;
    border-radius:0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu {
    display:block;
}
.dropdown-submenu>a:after {
    display:block;
    content:" ";
    float:right;
    width:0;
    height:0;
    border-color:transparent;
    border-style:solid;
    border-width:5px 0 5px 5px;
    border-left-color:#cccccc;
    margin-top:5px;
    margin-right:-10px;
}
.dropdown-submenu:hover>a:after {
    border-left-color:#ffffff;
}
.dropdown-submenu.pull-left {
    float:none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
    left:-100%;
    margin-left:10px;
    -webkit-border-radius:6px 0 6px 6px;
    -moz-border-radius:6px 0 6px 6px;
    border-radius:6px 0 6px 6px;
}

샘플 마크업

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">  
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div class="collapse navbar-collapse navbar-ex1-collapse">
            <ul class="nav navbar-nav">
                <li class="menu-item dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Drop Down<b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li class="menu-item dropdown dropdown-submenu">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Level 1</a>
                            <ul class="dropdown-menu">
                                <li class="menu-item ">
                                    <a href="#">Link 1</a>
                                </li>
                                <li class="menu-item dropdown dropdown-submenu">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Level 2</a>
                                    <ul class="dropdown-menu">
                                        <li>
                                            <a href="#">Link 3</a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</div>

추신 - 왼쪽 위치를 조정하는 navbar의 예: https://codeply.com/p/XEiERVGcmz

@skelly 솔루션은 좋지만 호버 상태가 작동하지 않기 때문에 모바일 장치에서 작동하지 않습니다.

BS 2.3.2 동작을 되돌리기 위해 JS를 조금 추가했습니다.

PS: 그것은 당신이 거기에 있는 CSS와 함께 작동할 것입니다: http://bootply.com/71520 . 하지만 당신은 다음 부분에 대해 언급할 수 있습니다:

CSS:

/*.dropdown-submenu:hover>.dropdown-menu{display:block;}*/

JS:

$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
  // Avoid following the href location when clicking
  event.preventDefault();
  // Avoid having the menu to close when clicking
  event.stopPropagation();
  // If a menu is already open we close it
  $('ul.dropdown-menu [data-toggle=dropdown]').parent().removeClass('open');
  // opening the one you clicked on
  $(this).parent().addClass('open');
});

결과는 내 WordPress 테마(페이지 맨 위)에서 확인할 수 있습니다.http://shprinkone.julienrenaux.fr/

현재(2014년 1월 9일)까지도 부트스트랩 3은 하위 메뉴 드롭다운을 지원하지 않습니다.

구글에서 반응형 내비게이션 메뉴를 검색해보니 이게 최고입니다.

스마트 메뉴입니다. http://www.smartmenus.org/

이것이 다단계 하위 메뉴가 있는 내비게이션 메뉴를 원하는 사람들을 위한 탈출구가 되길 바랍니다.

update 2015-02-17 스마트 메뉴는 이제 하위 메뉴에 대한 부트스트랩 요소 스타일을 완전히 지원합니다.자세한 내용은 스마트 메뉴 웹 사이트를 참조하십시오.

부트스트랩 5를 사용하면 새로운 기능 덕분에 자바스크립트 코드를 사용하지 않고 드롭다운 하위 메뉴를 구현하는 것이 매우 쉽습니다.autoClose옵션 및dropend학급.

라이브 데모: https://jsfiddle.net/b038kc2y/

.dropdown-menu .dropdown-menu {
  top: -.5rem !important;
}

<div class="dropdown m-5">
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
    Dropdown link
  </a>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <li class="dropend">
      <a class="dropdown-item" href="#" id="dropdownSubMenuLink" data-bs-toggle="dropdown" aria-expanded="false">Submenu Action</a>
      <ul class="dropdown-menu" aria-labelledby="dropdownSubMenuLink">
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
      </ul>
    </li>
  </ul>
</div>

Shprink의 코드는 저에게 가장 큰 도움이 되었지만, 화면 밖으로 떨어지는 드롭다운을 피하기 위해 다음과 같이 업데이트했습니다.

JS:

$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
    // Avoid following the href location when clicking
    event.preventDefault(); 
    // Avoid having the menu to close when clicking
    event.stopPropagation(); 
    // If a menu is already open we close it
    $('ul.dropdown-menu [data-toggle=dropdown]').parent().removeClass('open');
    // opening the one you clicked on
    $(this).parent().addClass('open');

    var menu = $(this).parent().find("ul");
    var menupos = $(menu).offset();

    if (menupos.left + menu.width() > $(window).width()) {
        var newpos = -$(menu).width();
        menu.css({ left: newpos });    
    } else {
        var newpos = $(this).parent().width();
        menu.css({ left: newpos });
    }

});

CSS: FROM background-color: #eeee to background-color: #c5c5c5 - 흰색 글꼴과 밝은 배경이 좋아 보이지 않았습니다.

.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus {
  background-color: #c5c5c5;
  border-color: #428bca;
}

저는 이것이 저에게 도움이 된 만큼 사람들에게 도움이 되기를 바랍니다!

하지만 나는 부트스트랩이 가능한 한 빨리 하위 기능을 추가하기를 바랍니다.

Skelly의 정말 유용한 해결 방법에 대한 의견: 부트스트랩-ass 3.3.6, utilities.scss, line 19:.pull-left가지다float:left !important그 이후로, 나는 그의 CSS에도 !important를 사용할 것을 추천합니다.

.dropdown-submenu.pull-left {
    float:none !important;
}

저는 며칠 전에 이 문제에 부딪혔습니다.저는 많은 솔루션을 시도했지만 실제로 작동하는 솔루션은 하나도 없었습니다. 결국 부트스트랩 드롭다운 코드의 확장/재지정을 만들었습니다.닫기 메뉴 기능이 변경된 원본 코드의 복사본입니다.

부트스트랩 j의 코어 클래스에 영향을 주지 않기 때문에 좋은 해결책이라고 생각합니다.

gihub에서 확인할 수 있습니다: https://github.com/djokodonev/bootstrap-multilevel-dropdown

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Dropdown Navbar</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">The Providers</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li ><a href="#">Home</a></li>
        <li  id="course" class="dropdown" ><a  href="#">Courses<span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">SEO</a></li>
          <li><a href="#">A.I</a></li>
          <li><a href="#">M.L</a></li>
          <li><a href="#">Graphics</a></li>
          <li id="sub-dropdown" class="dropdown"><a href="#">web Design<span style="margin-left: 43px;" class="glyphicon glyphicon-chevron-right"></span> </a>
        <ul id="sub-dropdown-menu" class="dropdown-menu">
          <li><a href="#">HTML</a></li>
          <li><a href="#">CSS</a></li>
          <li><a href="#">Bootstrap 3</a></li>
          <li><a href="#">JavaScript</a></li>
          <li><a href="#">Angular</a></li>
        </ul>
      </li>
          </li>
        </ul>
      </li>
        <li><a href="#">Gallery</a></li>
        <li><a href="#">Contact us</a></li>
        <li><a href="#">Policy</a></li>
      </ul>
    </div>
  </div>
</nav>
</body>
</html>

CSS

body{
    font-family: monospace;
    outline: none;
    background-image: url(image.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    height: 100vh;
}
.navbar-inverse{
    background-color: #2a84eb ;
    border-color: transparent;
}

.navbar-inverse .navbar-brand{
    color: #fff;
    font-size: 30px;
    margin-right: 40px;
}

#myNavbar .navbar-nav li a{
    color: #fff;
    font-size: 19px;
}
#myNavbar #course{
    transition: all 0.3s ease-in-out;
}
#myNavbar #course:hover{
    background-color:#0751a6; 
}   
.dropdown-menu{
  display: none;
  position: absolute;
  background-color: #f0f0f0;
  box-shadow: 2px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

#sub-dropdown-menu{
display: none;
  position: absolute;
  background-color: #f0f0f0;
  margin-left: 186px;
  margin-top: -26px;
}

#sub-dropdown-menu a , .dropdown-menu a {
    color: #000 !important;
    font-size: 16px !important;
}

.dropdown:hover .dropdown-menu {display: block;transition: all 0.5s ease-in-out;}

.dropdown .dropdown-menu a:hover{background-color: #c9c7c7;}

#sub-dropdown:hover #sub-dropdown-menu {display: block;}

출처: https://www.youtube.com/watch?v=6CgnWhJ-amE

Bootstrap 5의 경우 2022년에는 이 GitHub repo의 JS 코드가 하위 메뉴인 https://github.com/dallaslu/bootstrap-5-multi-level-dropdown 에 대한 궁극적인 솔루션입니다.

이것이 제 솔루션입니다(부트스트랩 5 사용).

HTML

<div class="btn-group dropend" role="group">
    <button id="submenu" type="button" class="dropdown-item  dropdown-toggle submenu" data-bs-toggle="dropdown" aria-expanded="false">
        Menu Item
    </button>
    <div class="dropdown-menu" aria-labelledby="submenu">
        <a class="dropdown-item">Submenu</a>
    </div>
</div>

제이에스

$('.submenu').click(function(e){
    e.preventDefault();
    e.stopPropagation();
});

드롭다운을 위한 다른 솔루션을 만듭니다.이것이 도움이 되기를 바랍니다. 그냥 이 js 스크립트를 추가하세요.

<script type="text/javascript"> jQuery("document").ready(function() {
  jQuery("ul.dropdown-menu > .dropdown.parent").click(function(e) {
    e.preventDefault();
    e.stopPropagation();
    if (jQuery(this).hasClass('open2'))
      jQuery(this).removeClass('open2');
    else {
      jQuery(this).addClass('open2');
    }

  });
}); < /script>

<style type="text/css">.open2{display:block; position:relative;}</style>

언급URL : https://stackoverflow.com/questions/18023493/bootstrap-dropdown-sub-menu-missing