admin管理员组

文章数量:1333195

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.

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.

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

Update Added HTML for the 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 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>

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.

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.

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

Update Added HTML for the 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 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>
  • javascript
  • jquery
  • twitter-bootstrap
Share Improve this question asked May 8, 2015 at 10:46 Alex ZahirAlex Zahir 9697 gold badges21 silver badges50 bronze badges 1
  • $('li.dropdown > a').data('toggle', 'dropdown'); – lshettyl Commented May 8, 2015 at 10:55
Add a ment  | 

2 Answers 2

Reset to default 2

You need to change it as below:

DEMO

 $('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-toggle instead of adding it as a property!!

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./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');

本文标签：

版权声明：本文标题：javascript - jQuery add class and &quot;data-toggle&quot; to bootstrap nav anchor when browser has a certain width - Sta 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742348077a2457930.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。