jquery - Bootstraps dropdown-menu in navbar does not open -


my dropdown-menu in navbar either not open (if omit open) or stays open time (when add open did in version below). how can open if omit open or how can make close again? (links jquery , bootstrapcdn there):

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>  <body data-spy="scroll" data-target=".navbar">    <!--navbar starts here-->    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">      <div class="container-fluid">        <div class="navbar-header">          <button type="button" class="navbar-toggle" data-toggle="collapse"    data-target=".navbar-collapse">            <span class="sr-only">toggle navigation</span>            <span class="icon-bar"></span>            <span class="icon-bar"></span>            <span class="icon-bar"></span>          </button>            <a class="navbar-brand" href="#">            <img alt="brand" src="...">          </a>            <div class="projectname">             <a href="#">ДЖУЛИН</a>          </div>        </div>          <div class="navbar-collapse collapse">          <ul class="nav navbar-nav navbar-right">            <li class="active"> <a href="#home"> home </a> </li>            <li class="dropdown open" role="presentation">              <a href="#" class="dropdown-toggle" data-toggle="dropdown"       role="button" aria-haspopup="true" aria-expanded="false"> work <span    class="caret"></span>              </a>              <ul class="dropdown-menu">                <li><a href="#work1" class="scroll-nav">work 1</a></li>                <li><a href="#work2" class="scroll-nav">work 2</a></li>              </ul>           </li>             <li class="active"> <a href="#about"> </a> </li>           <li class="active"> <a href="#faq"> faq </a> </li>           <li class="active"> <a href="#contact"> contact </a></li>        </ul>        </div> <!--collapse-->    </div> <!--header-->   </div> <!-- end nav container -->  </nav> <!-- end navbar-->

thanks already!

here go solution https://jsfiddle.net/08xp0q92/

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  <body data-spy="scroll" data-target=".navbar">    <!--navbar starts here-->    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">      <div class="container-fluid">        <div class="navbar-header">          <button type="button" class="navbar-toggle" data-toggle="collapse"    data-target=".navbar-collapse">            <span class="sr-only">toggle navigation</span>            <span class="icon-bar"></span>            <span class="icon-bar"></span>            <span class="icon-bar"></span>          </button>            <a class="navbar-brand" href="#">            <img alt="brand" src="...">          </a>            <div class="projectname">             <a href="#">ДЖУЛИН</a>          </div>        </div>          <div class="navbar-collapse collapse">          <ul class="nav navbar-nav navbar-right">            <li class="active"> <a href="#home"> home </a> </li>            <li class="dropdown open" role="presentation">              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> work <span    class="caret"></span>              </a>              <ul class="dropdown-menu">                <li><a href="#work1" class="scroll-nav">work 1</a></li>                <li><a href="#work2" class="scroll-nav">work 2</a></li>              </ul>           </li>             <li class="active"> <a href="#about"> </a> </li>           <li class="active"> <a href="#faq"> faq </a> </li>           <li class="active"> <a href="#contact"> contact </a></li>        </ul>        </div> <!--collapse-->    </div> <!--header-->   </nav> <!-- end nav container -->  </body> <!-- end navbar-->

you must include bootstrap.js.


Comments

Post a Comment

Popular posts from this blog

javascript - Create a stacked percentage column -

i have collection of data : var data = [ {"p301a":"10","p301b":"7","p301c":"7","p301d":"3","p301e":"8","p301f":"8","p301g":"8","p301h":"8","p301i":"8","p301j":"8","p301k":"8","p301l":"8","p301m":"8","p301n":"8","p301o":"8","age":"31-40 years","profesion":"2","position":"2"}, {"p301a":"5","p301b":"4","p301c":"4","p301d":"4","p301e":"4","p301f":"4","p301g":"4","p301h":"4","p301i":"4","p301j":"4","p301k":"4...
Read more

Optimising Firebase database by automatically overwriting data -

in firebase app have following structure: posts latest all users can write posts > latest . want limit entries 20 posts save space in database. , posts beyond 20 unnecessary never shown on homepage. how can limit posts 20, when user writes posts > latest posts @ end drop off (be deleted) automatically? this sample should you. you need : const max_log_count = 20; exports.removeold = functions.database.ref('/posts/latest/{postid}').oncreate(event => { const parentref = event.data.ref.parent; return parentref.once('value').then(snapshot => { if (snapshot.numchildren() >= max_log_count) { let childcount = 0; const updates = {}; snapshot.foreach(function(child) { if (++childcount <= snapshot.numchildren() - max_log_count) { updates[child.key] = null; } }); // update parent. removes children. ...
Read more

javascript - Angular UI-Grid customTemplate directive causing rows to load slowly/? -

Image
each grid cell can have more 1 customtemplate loaded. have directive holds watcher on model_col_field listen cell updates on scroll when dom rows updated , recompile celltemplate . without watcher , $compile rows repeat on scroll, showing same set of rows. is there more angular way of approaching or way improve performance? relevant controller code: create gridoptions.data & gridoptions.columndefs : var customtemp = '<div ng-repeat="opt in grid.appscope.colvalueoptionsmodel" ng-init="tempstring=model_col_field.clazz+opt.key;"><comparison-directive dbo="model_col_field" attobj="opt" fff="grid.appscope.getattributetemplate(tempstring)" /></div>'; $scope.gridoptions.columndefs = [ { name:'yindex',pinnedleft:true,celltemplate: customtemp, displayname:'index'}, { name:'col1',celltemplate: customtemp}, { name:'col2',celltemplate: c...
Read more