|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
HTML： <div class="col-md-3"> <nav class="navbar"> <div class="container-fluid"> <div class="navbar-header common-border-bottom common-border-right common-border-left"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse common-border-right common-border-bottom common-border-left" id="bs-example-navbar-collapse-1"> <ul class="nav nav-stacked navbar-nav"> <li class="dropdown open input-interval"> <a class="dropdown-toggle" data-toggle="dropdown">人生无常<b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">人性凉薄</a></li> <li><a href="#">看透了然</a></li> </ul> </li> </ul> </div> </div> </nav> </div> 由于加了open 所以默认是展开的，但是有个问题就是无论点击网页的任何地方都会折叠。以下的js解决了这个问题。 JS： <script> $(function () { var openddt = $(".open").children('.dropdown-toggle'); openddt.attr('data-toggle', ''); openddt.click(function () { $(this).siblings(".dropdown-menu").toggle(); }); }) </script> |