2016-03-28 46 views
8

Tôi đang gặp sự cố với thanh điều hướng nơi "flash" xuất hiện khi bạn nhấp vào bên ngoài trình đơn để đóng menu. Đèn flash vẫn tồn tại nếu chuột được tổ chức xuống khi nhấp ra khỏi menu như ở đây:Thanh điều hướng Bootstrap "nhấp nháy" khi nhấp vào bên ngoài trình đơn để đóng cửa sổ

Tôi nghĩ nó có thể có một cái gì đó để làm với góc cạnh, và không css, chủ yếu là vì những người khác đã thất bại để tái tạo nó trên fiddle.

HTML:

<nav class='navbar navbar-default.navbar-static-top navbar-custom'> 
    <div class='container-fluid'> 
    <ul class='nav navbar-nav navbar-left'> 
     <li><a href="dashboard.html">Dashboard</a></li> 
     <li><a href="/grades">Grades</a></li> 
     <li><a href="/classes">Classes</a></li> 
    </ul> 
    <ul class='nav navbar-nav navbar-right'> 
     <li><a href="/messages"><i class="fa fa-envelope fa-lg"></i></a></li> 

     <!--has to do with the link, clicking it and clicking it again--> 
     <li><a class="dropdown-toggle dropdown-custom" data-toggle="dropdown" href="/profile"><i class="fa fa-user fa-lg"></i></a> 
     <ul class="dropdown-menu"> 
      <li><a href="/profile.html">Edit profile</a></li> 
      <li><a href="/settings">Edit Preferences</a></li> 
     </ul> 
     </li> 
     <li><a href="/logout"><i class="fa fa-power-off fa-lg"></i></a></li>  
    </ul> 

    </div> 
</nav> 

CSS:

[ng\:cloak], [ng-cloak], .ng-cloak { 
    display: none !important; 
} 
.navbar-custom { 
    background-color: #586F7C; 
} 
.navbar-custom a { 
    color: #F4F4F9; 
} 
.navbar-custom .nav > li > a:hover { 
    background-color: #2F4550; 
} 
.navbar .navbar-nav > li.open > a, { 
    background-color: #586F7C; 
} 
.navbar .navbar-nav > li.open > a:hover, 
.navbar .navbar-nav > li.open > a:focus { 
    background-color: #2F4550; 
} 
.nav >li > a:hover, .nav > li > a:focus { 
    background-color: #586F7C; 
} 

ng-bao gồm trong file thanh điều hướng được tham chiếu trong

<div ng-include="'html/navbar.html'"></div> 

phần index.html nơi mà nó tham chiếu tệp mà thanh điều hướng được bao gồm trong

<body> 
<div class="view-container"> 
    <div ng-view class="view-frame"></div> 
</div> 
</body> 

Tôi nghĩ vấn đề có thể là với ng-view hoặc ng-include, tuy nhiên cho đến nay không có bản sửa lỗi nào trong câu hỏi trước đó hoạt động.

+0

[Bạn có thể tạo ra một plunker] (https://plnkr.co)? – Vucko

+0

Chà, tôi vừa tìm thấy vấn đề trong khi tạo một kẻ buôn bán. Cảm ơn! – Left

Trả lời

0

Vấn đề là ở đây:

.navbar .navbar-nav > li.open > a, { 
    background-color: #586F7C; 
} 

Đó thêm "" là vấn đề. Vì vậy, nó đã kết thúc chỉ là một lỗi cú pháp, làm thế nào xấu hổ haha. Không có thắc mắc có vẻ như tất cả mọi thứ nên được làm việc, nó chỉ là một dấu phẩy nhỏ ở sai chỗ!

2

Một hack nhanh chóng có thể được bổ sung này để css của bạn

.nav >li > a:hover, .nav > li > a:focus { 
    background-color: #586F7C; 
} 

Chỉnh sửa: Tôi chỉ nhận ra bạn đã nhìn thấy như một giải pháp trong chủ đề khác, nhưng tôi đã có thể tái tạo "lỗi của bạn". Here is a bootply, chỉ cần cố gắng để bình luận ra css và lỗi sẽ có mặt, với css nó làm việc như mong đợi.

+0

Tôi thực sự đã có css chính xác trong bản định kiểu của tôi, nhưng bằng cách nào đó nó không sửa lỗi nhấp nháy trên đầu của tôi. :( – Left

0

Một jQuery nhỏ sẽ giải quyết được sự cố. Chỉ cần thêm phần sau cho các thẻ neo đang nhấp nháy.

`` `

$('.navbar-custom .navbar-nav li a').on('mouseup', function(){ 
     $(this).blur(); 
    }); 

` ``

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