javascript - jQuery add class and "data-toggle" to bootstrap nav anchor when browser has a certain width -

i using bootstrap 3 framework dropdown menu when mouse hovered on nav instead of click. using css i've set circumstances happens when browser width more 979.

when browser width less 979 want menu show on click instead of hover. think can achieved using jquery.

my attempt:

  if ($(window).width() < 979) {         $('li.dropdown > a').addclass('dropdown-toggle');         $('li.dropdown > a').append('data-toggle="dropdown"');     } else {         $('li.dropdown > a').removeclass('dropdown-toggle');     } 

this results in no class being added dropdown anchor , instead of adding data-toggle anchor " adds inside anchor.

how achieve data toggle added " , class added.

thanks

update added html nav:

 <nav class="navbar navbar-default md-nav" role="navigation">      <div class="container-fluid">         <select class="nav-sel">             <option value="vous etes">vous etes</option>             <option value="vous etes">vous etes</option>             <option value="vous etes">vous etes</option>             <option value="vous etes">vous etes</option>         </select>          <!-- brand , toggle grouped better mobile display -->         <div class="navbar-header">           <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">             <span class="sr-only"></span>             <span class="icon-bar"></span>             <span class="icon-bar"></span>             <span class="icon-bar"></span>           </button>         </div>          <!-- collect nav links, forms, , other content toggling -->         <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">           <ul class="nav navbar-nav nav nav-tabs">                 <li class="dropdown"><a href="#">ministére</a>                     <div class="dropdown-menu">                         <ul>                             <li><a href="#">promotion</a></li>                             <li><a href="#">prévention</a></li>                             <li><a href="#">les féderations</a></li>                             <li><a href="#">le diréct</a></li>                             <li><a href="#">emplois & mériers</a></li>                             <li><a href="#">grand evénements</a></li>                         </ul>                         <img src="img/athlete-img1.jpg" alt="athlete running" />                     </div>                 </li>                 <li class="dropdown"><a href="#">sport</a>                     <div class="dropdown-menu">                         <ul>                             <li><a href="#">promotion</a></li>                             <li><a href="#">prévention</a></li>                             <li><a href="#">les féderations</a></li>                             <li><a href="#">le diréct</a></li>                             <li><a href="#">emplois & mériers</a></li>                             <li><a href="#">grand evénements</a></li>                         </ul>                         <img src="img/athlete-img1.jpg" alt="athlete running" />                     </div>                 </li>                 <li class="dropdown"><a href="#">jeunesse</a>                     <div class="dropdown-menu">                         <ul>                             <li><a href="#">promotion</a></li>                             <li><a href="#">prévention</a></li>                             <li><a href="#">les féderations</a></li>                             <li><a href="#">le diréct</a></li>                             <li><a href="#">emplois & mériers</a></li>                             <li><a href="#">grand evénements</a></li>                         </ul>                         <img src="img/athlete-img1.jpg" alt="athlete running" />                     </div>                 </li>                 <li class="dropdown"><a href="#">publications</a>                     <div class="dropdown-menu">                         <ul>                             <li><a href="#">promotion</a></li>                             <li><a href="#">prévention</a></li>                             <li><a href="#">les féderations</a></li>                             <li><a href="#">le diréct</a></li>                             <li><a href="#">emplois & mériers</a></li>                             <li><a href="#">grand evénements</a></li>                         </ul>                         <img src="img/athlete-img1.jpg" alt="athlete running" />                     </div>                 </li>                 <li class="dropdown"><a href="#">mediatheque</a>                     <div class="dropdown-menu">                         <ul>                             <li><a href="#">promotion</a></li>                             <li><a href="#">prévention</a></li>                             <li><a href="#">les féderations</a></li>                             <li><a href="#">le diréct</a></li>                             <li><a href="#">emplois & mériers</a></li>                             <li><a href="#">grand evénements</a></li>                         </ul>                         <img src="img/athlete-img1.jpg" alt="athlete running" />                     </div>                 </li>                 <li><a href="#">espace medias</a></li>            </ul>         </div><!-- /.navbar-collapse -->     </div><!-- /.container --> </nav>   

you need change below:

demo

 $('li.dropdown>a').addclass('dropdown-toggle');  $('li.dropdown>a').attr('data-toggle','dropdown'); 

the problem in below line:

 $('li.dropdown > a').append('data-toggle="dropdown"'); 

you trying append data-toggle instead of adding property!!