当浏览器具有一定宽度时，jQuery将类和“数据切换”添加到引导导航锚点

Posted 2023-05-09

【中文标题】当浏览器具有一定宽度时，jQuery将类和“数据切换”添加到引导导航锚点

【英文标题】：jQuery add class and "data-toggle" to bootstrap nav anchor when browser has a certain width

【发布时间】：2015-07-19 06:08:28

【问题描述】：

当鼠标悬停在导航而不是单击时，我正在使用带有下拉菜单的 Bootstrap 3 框架。但是使用 CSS 我已经设置了环境，所以这只发生在浏览器宽度超过 979 时。

当浏览器宽度小于 979 时，我希望菜单在单击而不是悬停时显示。我认为这可以使用 jQuery 来实现。

我的尝试：

  if ($(window).width() < 979) 
        $('li.dropdown > a').addClass('dropdown-toggle');
        $('li.dropdown > a').append('data-toggle="dropdown"');
     else 
        $('li.dropdown > a').removeClass('dropdown-toggle');
    

这导致没有类被添加到下拉锚点，而不是像“将数据切换添加到锚点，而是将它添加到锚点内。

如何实现像“一样添加数据切换，并且类也正确添加。

谢谢

更新 为导航添加了 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"  />
                    </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"  />
                    </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"  />
                    </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"  />
                    </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"  />
                    </div>
                </li>
                <li><a href="#">Espace Medias</a></li>
           </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container -->
</nav>  

【问题讨论】：

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

【参考方案1】：

你需要改变它如下：

DEMO

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

问题出在下面一行：

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

您试图附加 data-toggle 而不是将其添加为属性！！

【参考方案2】：

如果您希望触发器在页面加载时以外的情况下工作，您需要绑定到窗口调整大小事件并触发基于该事件的检查。

$(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>

你也应该使用$('li.dropdown > a').attr('data-toggle','dropdown');而不是$('li.dropdown > a').append('data-toggle="dropdown"');