Menu phụ thả xuống Bootstrap bị thiếu

Bootstrap 3 vẫn ở RC, nhưng tôi chỉ cố gắng thực hiện nó. Tôi không thể tìm ra làm thế nào để đặt một lớp menu phụ. Ngay cả không có lớp trong css và thậm chí các tài liệu mới không nói gì về nó

Nó ở đó trong 2.x với tên lớp là menu thả xuống

Cập nhật 2018

Cái dropdown-submenuđã bị xóa trong Bootstrap 3 RC. Theo lời của tác giả Bootstrap Mark Otto ..

"Các menu con hiện tại không có nhiều vị trí trên web, đặc biệt là web di động. Chúng sẽ bị xóa bằng 3.0" - https://github.com/twbs/bootstrap/pull/6342

Nhưng, với một chút CSS bổ sung, bạn có thể có được chức năng tương tự.

Bootstrap 4 (menu con thanh điều hướng khi di chuột)

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

Menu thả xuống menu phụ Navbar Di chuột thả xuống menu phụ
Navbar (liên kết bên phải)
Menu thả xuống menu phụ Navbar nhấp chuột (căn phải)
Di chuột thả xuống Navbar (không có menu phụ)

Bootstrap 3

Dưới đây là một ví dụ sử dụng 3.0 RC 1: http://bootply.com/71520

Dưới đây là một ví dụ sử dụng Bootstrap 3.0.0 (bản cuối cùng): http://bootply.com/86684

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;
}

Đánh dấu mẫu

<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>

PS - Ví dụ trong thanh điều hướng điều chỉnh vị trí bên trái: http://bootply.com/92442

Giải pháp @skelly là tốt nhưng sẽ không hoạt động trên thiết bị di động vì trạng thái di chuột sẽ không hoạt động.

Tôi đã thêm một chút JS để lấy lại hành vi BS 2.3.2.

PS: nó sẽ hoạt động với CSS mà bạn có ở đó: http://bootply.com/71520 mặc dù bạn có thể nhận xét phần sau:

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');
});

Kết quả có thể được tìm thấy trên chủ đề WordPress của tôi (Đầu trang): http://shprinkone.julienrenaux.fr/

Cho đến ngày hôm nay (9 tháng 1 năm 2014), Bootstrap 3 vẫn không hỗ trợ thả xuống menu phụ.

Tôi đã tìm kiếm trên Google về menu điều hướng đáp ứng và thấy đây là cái tốt nhất.

Đây là menu thông minh http://www.smartmenus.org/

Tôi hy vọng đây là lối thoát cho bất kỳ ai muốn menu điều hướng với menu phụ đa cấp.

cập nhật 2015/02/17 Các menu thông minh hiện hỗ trợ đầy đủ kiểu phần tử Bootstrap cho menu con. Để biết thêm thông tin xin vui lòng xem trang web Menu thông minh.

Mã của Shprink đã giúp tôi nhiều nhất, nhưng để tránh việc thả xuống màn hình, tôi đã cập nhật nó thành:

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: TỪ màu nền: #eeeeee ĐẾN màu nền: # c5c5c5 - phông chữ màu trắng và nền sáng trông không đẹp.

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

Tôi hy vọng điều này sẽ giúp mọi người nhiều như nó đã làm cho tôi!

Nhưng tôi hy vọng Bootstrap thêm tính năng phụ trở lại càng sớm càng tốt.

Nhận xét về cách giải quyết thực sự hữu ích của Skelly : trong Bootstrap-sass 3.3.6, Utility.scss, dòng 19: .pull-lefthas float:left !important. Vì thế, tôi cũng khuyên bạn nên sử dụng! Quan trọng trong CSS của mình:

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

Tôi đã gặp vấn đề này vài ngày trước. Tôi đã thử nhiều giải pháp và cuối cùng không có giải pháp nào hiệu quả cho tôi, cuối cùng tôi đã tạo ra một phần mở rộng / ghi đè mã thả xuống của bootstrap. Nó là một bản sao của mã gốc với các thay đổi đối với hàm closeMenus.

Tôi nghĩ rằng đó là một giải pháp tốt vì nó không ảnh hưởng đến các lớp cốt lõi của bootstrap js.

Bạn có thể kiểm tra trên gihub: https://github.com/djokodonev/bootstrap-multilevel-dropdown

Tôi thực hiện một giải pháp khác cho thả xuống. Hy vọng đây là hữu ích Chỉ cần thêm tập lệnh js này

<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>