javascript - How can I remove caret on Bootstrap 3 menu and show dropdown on hover? - Stack Overflow

admin管理员组

文章数量:1389812

I have set up Bootstrap 3 on my Wordpress theme and I have got the submenu working correctly on a mobile (grey arrow to indicate it is a dropdown which opens on click).

On a desktop I would like the dropdown to work on hover without the arrow image. Is there a way to do this without affecting the mobile layout? see this.

I have set up Bootstrap 3 on my Wordpress theme and I have got the submenu working correctly on a mobile (grey arrow to indicate it is a dropdown which opens on click).

On a desktop I would like the dropdown to work on hover without the arrow image. Is there a way to do this without affecting the mobile layout? see this.

• javascript
• jquery
• html
• css
• twitter-bootstrap

Share Improve this question Follow edited Dec 30, 2013 at 10:34 Mani 17.6k1313 gold badges8181 silver badges102102 bronze badges asked Dec 30, 2013 at 9:52 user3050023user3050023 7311 gold badge33 silver badges88 bronze badges 1

• You can use Media Queries. – Ali Gajani Commented Dec 30, 2013 at 10:01

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

I get it, you don't want the users to see the "caret" on the desktop. This could be achieved with minimal amount of Media Queries. It should be something along these lines. I got the Desktop breakpoint Media query code right from Bootstrap 3 Docs.

@media (min-width: 1200px) {
  .navbar-nav .caret {
  display:none;
 }

 .dropdown:hover .dropdown-menu {
   display: block;
  }
}

You can use Jquery hover to activate the drop-down

Try this

$(document).ready(function() {
    $('.nav li.dropdown').hover(function() {
        $(this).addClass('open');
    }, function() {
        $(this).removeClass('open');
    });
    if($(window).width() > 750)
    {
    $('b.caret').hide() 
    }
});

DEMO

本文标签： javascriptHow can I remove caret on Bootstrap 3 menu and show dropdown on hoverStack Overflow