2015-01-11 18 views
5

Tôi đã sử dụng bootstrap trong trình đơn chính và vì dự án của tôi có nhiều trang, trang con và trang con, tôi đã sử dụng trình đơn thả xuống bootstrap để điều hướng qua.Bootstrap mở liên kết khi nhấp vào nút menu thả xuống

Khách hàng của tôi bây giờ cũng muốn có thể truy cập liên kết được liên kết với chính nút thả xuống thay vì childen. Khách hàng của tôi có văn bản trên một trang gọi là 'hỗ trợ khách hàng' và văn bản trên trang con (trẻ em). Lý tưởng nhất là tôi muốn người dùng lần đầu tiên nhấp vào một nút dropdownmenu (ví dụ: "Dịch vụ khách hàng"), và một dropdownmenu mở ra (mà Bootstrap làm), và trên một nhấp chuột thứ hai có thể đi đến liên kết liên kết với nút dropdownmenu (ví dụ "/ customer-service").

tôi sẽ chia sẻ một số mã để làm cho nó dễ hiểu hơn một chút:

<body> 
<nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
      <ul class="nav navbar-nav"> 
       <li class="dropdown"> <a href="/customer-service" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a> 

        <!-- click this menu-button once, and the submenu below opens, click this menu-button twice and you go to /customer-service --> 
        <ul class="dropdown-menu" role="menu"> 
         <li><a href="#">Action</a> 
         </li> 
         <li><a href="#">Another action</a> 
         </li> 
         <li><a href="#">Something else here</a> 
         </li> 
         <li class="divider"></li> 
         <li><a href="#">Separated link</a> 
         </li> 
        </ul> 
       </li> 
      </ul> 
      <ul class="nav navbar-nav"> 
       <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a> 

        <ul class="dropdown-menu" role="menu"> 
         <li><a href="#">Action</a> 
         </li> 
         <li><a href="#">Another action</a> 
         </li> 
         <li><a href="#">Something else here</a> 
         </li> 
         <li class="divider"></li> 
         <li><a href="#">Separated link</a> 
         </li> 
        </ul> 
       </li> 
      </ul> 
     </div> 
    </div> 
</nav> 

http://jsfiddle.net/kozog9rx/2/

(hãy chắc chắn để đọc các comment trong HTML và cung cấp cho các "quả-view" đủ không gian/chiều rộng để menu xuất hiện)

+2

Vui lòng chia sẻ một số mã, sẽ dễ hiểu vấn đề của bạn và diễn đạt hơn, bằng cách viết về nó :) – surajck

+0

Tôi sẽ cảm ơn bạn, xin lỗi vì sự vắng mặt của tôi trong vài ngày. Tôi đã khá bận rộn với một dự án khác :) – Jackques

+0

Tôi đã thay đổi tiêu đề và văn bản của bài đăng của tôi để làm cho nó rõ ràng hơn. Bạn có thể hoặc người khác vui lòng có một cái nhìn khác không? – Jackques

Trả lời

3

Vâng, giả sử bạn đang sử dụng bootstrap 3.2.0 Đây là mã:

<li class="dropdown"> 
    <a href="example.com/page">Dropdown</a> 
    <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>  
    <ul class="dropdown-menu" role="menu"> 
     <li><a href="#">Action</a></li> 
     <li><a href="#">Another action</a></li> 
     <li><a href="#">Something else here</a></li> 
     <li class="divider"></li> 
     <li><a href="#">Separated link</a></li> 
     <li class="divider"></li> 
     <li><a href="#">One more separated link</a></li> 
    </ul> 
</li> 

Điều tôi đang làm là làm cho carat mở menu và văn bản href đến bất cứ nơi nào bạn muốn.

+0

Cảm ơn bạn đã cho ví dụ của bạn. Tôi đã thử nó, nhưng nó không hoàn toàn cho kết quả tôi đã hy vọng, bởi vì khi tôi chạy nó trong dev của tôi. môi trường người dùng phải nhấp vào mũi tên/dấu mũ seperatly để đi đến liên kết và văn bản "Thả xuống" để mở menu thả xuống. Tôi muốn người dùng mở trình đơn thả xuống trên lần nhấp đầu tiên vào nút và chuyển đến liên kết khi người dùng nhấp vào cùng một menubutton lần thứ hai. Tôi tin rằng điều này có thể đạt được thông qua JS, nhưng vì đây là Bootstrap cấp độ rất sâu và JS tôi không có một đầu mối về nơi để bắt đầu. – Jackques

Các vấn đề liên quan