Bootstrap：移动时隐藏下拉菜单并链接到父级

Question

I am starting to work with bootstrap and encountered a problem. I would like to have a drop down menu when in desktop view but would like it to be hidden when in mobile view.

I have the <a href=""> (right now www.example.com) set for the parent item. Since it is use to display a drop down the link is going nowhere, which is fine when i'm on desktop.

What I need is to be able to hide the drop down menu in mobile and get the user to the link of the first item. Therefor the whole <ul> would be hidden. I tried using the .hidden-xs class but it will simply hide the <ul> and not use the provided href .

Should I simply create two different menus, one for larger devices and one for mobile?

Thanks in advance

<div class="btn-group">
  <a class="btn dropdown-toggle" data-toggle="dropdown" href="http://www.example.com">
    Item 1
  </a>
  <ul class="dropdown-menu">
    <li><a href="#">Choice1</a></li>
    <li><a href="#">Choice2</a></li>
    <li><a href="#">Choice3</a></li>
  </ul>
</div>

Answer 1

I would do a javascript detection using an IF condition to see if you are on a mobile device or not and show it according to what is returned.

Here's a site that shows multiple ways to detect if you are on a mobile browser or not including the javascript one. I could show the javascript code however its incredibly long and obscure. Of course any of these would do depending on the technology stack you are using.

http://detectmobilebrowsers.com/

Answer 2

You can use CSS to do this but it may not be efficient depending on your ultimate implementation.

You can change the dropdown-menu display property to inline-block/block at the desired media query (example at 768px), then set display: none for all but the first child of the dropdown-menu li while adding hidden-xs to the dropdowns button to hide it as well.

See working example at Full Page, then reduce the browser window to see the change.

 @media (max-width: 767px) { .btn-group-hidden .dropdown-menu { display: inline-block; box-shadow: none; border: none; position: relative; } .btn-group-hidden .dropdown-menu li:not(:first-child) { display: none; } /**For Styling Only**/ .btn-group-hidden .dropdown-menu > li:first-child { border: 1px solid #ccc; border-radius: 3px; text-align: center; width: auto; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <div class="container"> <h3 class="alert alert-info text-center">Some Text</h3> <div class="row"> <div class="col-sm-4"> <div class="btn-group btn-group-hidden"> <button type="button" class="btn btn-default dropdown-toggle hidden-xs" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Item 1 <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="https://www.google.com" target="_blank">Choice1</a> </li> <li><a href="#">Choice2</a> </li> <li><a href="#">Choice3</a> </li> </ul> </div> <div class="btn-group btn-group-hidden"> <button type="button" class="btn btn-default dropdown-toggle hidden-xs" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Item 1 <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="https://www.google.com" target="_blank">Choice1</a> </li> <li><a href="#">Choice2</a> </li> <li><a href="#">Choice3</a> </li> </ul> </div> </div> <div class="col-sm-8"> <div class="well well-sm">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div> </div> </div>