twitter-bootstrap 当浏览器具有一定宽度时，jQuery 添加类和“数据切换”以引导导航锚点
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30121902/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery add class and "data-toggle" to bootstrap nav anchor when browser has a certain width
提问by Alex Zahir
I am using the Bootstrap 3 framework with dropdown menu when mouse is hovered over the nav instead of click. But using CSS i've set circumstances so this only happens when browser width is more than 979.
当鼠标悬停在导航上而不是单击时，我正在使用带有下拉菜单的 Bootstrap 3 框架。但是使用 CSS 我已经设置了环境，所以这只会在浏览器宽度超过 979 时发生。
When the browser width is less than 979 I want the menu to show on click instead of hover. I think this can be achieved using jQuery.
当浏览器宽度小于 979 时，我希望菜单在单击时显示而不是悬停。我认为这可以使用 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 to the dropdown anchor and instead of adding data-toggle to the anchor like " it adds it inside the anchor.
这导致没有类被添加到下拉锚点，而不是像“那样将数据切换添加到锚点，而是将它添加到锚点内部。
How do I achieve the data toggle to be added like " and the class also properly added.
我如何实现要添加的数据切换，如 " 并且类也已正确添加。
Thanks
谢谢
UpdateAdded HTML for the nav:
更新为导航添加了 HTML：
<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 and toggle get grouped for 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 the nav links, forms, and other content for 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>
回答by Guruprasad Rao
You need to change it as below:
你需要改变它如下：
$('li.dropdown>a').addClass('dropdown-toggle');
$('li.dropdown>a').attr('data-toggle','dropdown');
The problem was in below line:
问题出在下面一行：
$('li.dropdown > a').append('data-toggle="dropdown"');
You were trying to append data-toggleinstead of adding it as a property!!
您试图追加data-toggle而不是将其添加为属性！！
回答by zmanc
You need to tie into the window resize event and trigger the check based off of that if you want the trigger to work other than only when the page is loaded.
如果您希望触发器在加载页面时以外的其他情况下工作，则需要绑定到窗口调整大小事件并基于该事件触发检查。
$(window).on('resize', function() {
if ($(window).width() < 550) {
$('#changeMe').addClass('addedClass');
} else {
$('#changeMe').removeClass('addedClass');
}
});.addedClass {
background-color: blue;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="changeMe">Hey</div>Also instead of $('li.dropdown > a').append('data-toggle="dropdown"');you should be using $('li.dropdown > a').attr('data-toggle','dropdown');
而不是同时$('li.dropdown > a').append('data-toggle="dropdown"');你应该使用$('li.dropdown > a').attr('data-toggle','dropdown');
