Câu hỏi Thanh trượt thả xuống đáp ứng với bootstrap góc-ui (được thực hiện theo kiểu góc chính xác)


Tôi đã tạo một JSFiddle với một thanh điều hướng thả xuống bằng cách sử dụng mô-đun angular-ui-boostrap "ui.bootstrap.dropdownToggle": http://jsfiddle.net/mhu23/2pmz5/

<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
    <div class="container"> <a class="brand" href="#">
                My Responsive NavBar
            </a>

        <ul class="nav">
            <li class="divider-vertical"></li>
            <li class="dropdown"> <a href="#" class="dropdown-toggle">
                        Menu 1 <b class="caret"></b>
                    </a>

                <ul class="dropdown-menu">
                    <li><a href="#/list">Entry 1</a>
                    </li>
                    <li><a href="#/list">Entry 2</a>
                    </li>
                </ul>
            </li>
          ....
        </ul>
    </div>
</div>
</div>

Theo như tôi hiểu, đây là một cách phù hợp, góc cạnh để thực hiện một trình đơn thả xuống như vậy. Cách "sai", về góc độ, sẽ bao gồm bootstrap.js và sử dụng "data-toggle =" dropdown "... Tôi có ở đây không?

Bây giờ tôi muốn thêm hành vi đáp ứng vào thanh điều hướng của tôi như được thực hiện trong Fiddle sau: http://jsfiddle.net/ghtC9/6/

NHƯNG, có điều tôi không thích về giải pháp trên. Các chàng trai bao gồm bootstrap.js!

Vì vậy, những gì sẽ là loại góc chính xác của cách để thêm hành vi đáp ứng vào navbar hiện tại của tôi?

Tôi rõ ràng là cần phải sử dụng các lớp navbar đáp ứng bootstraps như "nav-collapse collapse navbar-responsive-collapse". Nhưng tôi không biết làm thế nào ...

Tôi thực sự đánh giá cao sự giúp đỡ của bạn!

Cảm ơn bạn trước! Michael


76
2018-04-28 22:18


gốc




Các câu trả lời:


Bạn có thể làm điều đó bằng cách sử dụng chỉ thị "thu gọn": http://jsfiddle.net/iscrow/Es4L3/ (kiểm tra hai "Lưu ý" trong HTML).

        <!-- Note: set the initial collapsed state and change it when clicking -->
        <a ng-init="navCollapsed = true" ng-click="navCollapsed = !navCollapsed" class="btn btn-navbar">
           <span class="icon-bar"></span>
           <span class="icon-bar"></span>
           <span class="icon-bar"></span>
        </a>
        <a class="brand" href="#">Title</a>
           <!-- Note: use "collapse" here. The original "data-" settings are not needed anymore. -->
           <div collapse="navCollapsed" class="nav-collapse collapse navbar-responsive-collapse">
              <ul class="nav">

Tức là, bạn cần lưu trữ trạng thái thu gọn trong một biến và thay đổi giá trị thu gọn cũng bằng (đơn giản) thay đổi giá trị của biến đó.


Đã phát hành 0,14 đã thêm uib- tiền tố cho các thành phần:

https://github.com/angular-ui/bootstrap/wiki/Migration-guide-for-prefixes

Thay đổi: collapse đến uib-collapse.


57
2018-05-06 14:14



Điều này dường như không trả lời câu hỏi trực tiếp - anh ấy đang nói về một nút thả xuống trong thanh điều hướng và bạn đang nói về việc thu gọn toàn bộ thanh điều hướng. Tui bỏ lỡ điều gì vậy? - PW Kad
Fiddle không hoạt động nữa? - Andy
Cảm ơn người đàn ông, tôi đã dành rất nhiều thời gian cố gắng tìm ra lý do tại sao một trình đơn thu gọn đơn giản không hoạt động - Ignacio Vazquez
Cá nhân, tôi không nghĩ rằng uib-sụp đổ là sai đường để đi cho một thanh nav. Tôi thà sử dụng uib-dropdown. - jae.phoenix


Cập nhật 2015-06

Dựa trên nhận xét / ví dụ của antoinepairet:

Sử dụng uib-collapse thuộc tính cung cấp hình ảnh động: http://plnkr.co/edit/omyoOxYnCdWJP8ANmTc6?p=preview 

<nav class="navbar navbar-default" role="navigation">
    <div class="navbar-header">

        <!-- note the ng-init and ng-click here: -->
        <button type="button" class="navbar-toggle" ng-init="navCollapsed = true" ng-click="navCollapsed = !navCollapsed">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Brand</a>
    </div>

    <div class="collapse navbar-collapse" uib-collapse="navCollapsed">
        <ul class="nav navbar-nav">
        ...
        </ul>
    </div>
</nav>

Xưa..

Tôi thấy rằng câu hỏi được đóng khung xung quanh BS2, nhưng tôi nghĩ rằng tôi muốn pitch trong với một giải pháp cho Bootstrap 3 sử dụng giải pháp ng-class dựa trên các đề xuất trong vấn đề ui.bootstrap 394:

Biến thể duy nhất từ ví dụ khởi động chính thức là sự bổ sung ng- các thuộc tính được ghi chú bằng các bình luận bên dưới:

<nav class="navbar navbar-default" role="navigation">
  <div class="navbar-header">

    <!-- note the ng-init and ng-click here: -->
    <button type="button" class="navbar-toggle" ng-init="navCollapsed = true" ng-click="navCollapsed = !navCollapsed">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#">Brand</a>
  </div>

  <!-- note the ng-class here -->
  <div class="collapse navbar-collapse" ng-class="{'in':!navCollapsed}">

    <ul class="nav navbar-nav">
    ...

Đây là một ví dụ làm việc được cập nhật: http://plnkr.co/edit/OlCCnbGlYWeO7Nxwfj5G?p=preview (hat tip Lars)

Điều này dường như làm việc cho tôi trong trường hợp sử dụng đơn giản, nhưng bạn sẽ lưu ý trong ví dụ rằng danh sách thả xuống thứ hai bị cắt bỏ ... chúc may mắn!


123
2017-10-11 10:45



Thay vì ng-class bạn nên sử dụng 'collapse = "navCollapsed"'. bởi vì phiên bản của bạn không tạo ra bất kỳ hoạt ảnh nào - bernhardh
Cải tiến khác: thêm ng-click = "navCollapsed = true" vào div cuối cùng của đoạn mã để trình đơn thả xuống sụp đổ sau khi một mục được chọn. - Lars Behnke
@streetlogics Nó phải là "navCollapsed", bạn đã bỏ lỡ "d" ở đó - PSWai
Tôi không chỉnh sửa kịp thời, nhưng tôi đã thay đổi <div class="collapse navbar-collapse" ng-class="{'in':!navCollapsed}"> đến <div collapse="navCollapsed"> và quá trình chuyển đổi đã hoạt động! - edhedges
Tôi phải thiếu một cái gì đó ở đây, nhưng không giải pháp này kết quả trong phiên bản máy tính để bàn của trình đơn bị sụp đổ và không thể xem được, cho chuyển hướng navbar được ẩn? Ngay cả với các cập nhật từ các bình luận này vẫn là trường hợp.


Không chắc chắn nếu có ai có cùng một vấn đề đáp ứng, nhưng nó chỉ là một giải pháp css đơn giản cho tôi.

cùng ví dụ

...  ng-init="isCollapsed = true" ng-click="isCollapsed = !isCollapsed"> ...
...  div collapse="isCollapsed"> ...

với

@media screen and (min-width: 768px) {
    .collapse{
        display: block !important;
    }
}

8
2018-01-13 22:01



Bạn nên thêm vào bộ chọn .collapse với id của nav để nó không làm hỏng mọi sự sụp đổ trong trang - NiloVelez


Giải pháp của tôi cho thanh điều hướng đáp ứng / thả xuống với bootstrap góc-ui (khi cập nhật lên góc 1.5 và, ui-bootrap 1.2.1)
index.html 

     ...    
    <link rel="stylesheet" href="/css/app.css">
</head>
<body>


<nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <input type="checkbox" id="navbar-toggle-cbox">
            <div class="navbar-header">
                <label for="navbar-toggle-cbox" class="navbar-toggle" 
                       ng-init="navCollapsed = true" 
                       ng-click="navCollapsed = !navCollapsed"  
                       aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </label>
                <a class="navbar-brand" href="#">Project name</a>
                 <div id="navbar" class="collapse navbar-collapse"  ng-class="{'in':!navCollapsed}">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="/view1">Home</a></li>
                        <li><a href="/view2">About</a></li>
                        <li><a href="#">Contact</a></li>
                        <li uib-dropdown>
                            <a href="#" uib-dropdown-toggle>Dropdown <b class="caret"></b></a>
                            <ul uib-dropdown-menu role="menu" aria-labelledby="split-button">
                                <li role="menuitem"><a href="#">Action</a></li>
                                <li role="menuitem"><a href="#">Another action</a></li>                                   
                            </ul>
                        </li>

                    </ul>
                 </div>
            </div>
        </div>
    </nav>

app.css

/* show the collapse when navbar toggle is checked */
#navbar-toggle-cbox:checked ~ .collapse {
    display: block;
}

/* the checkbox used only internally; don't display it */
#navbar-toggle-cbox {
  display:none
}

1
2018-03-02 09:24