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

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>

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>

Share Improve this question asked May 8, 2015 at 10:46 Alex Zahir 9697 gold badges21 silver badges50 bronze badges

$('li.dropdown > a').data('toggle', 'dropdown'); – lshettyl Commented May 8, 2015 at 10:55

Add a ment |

2 Answers 2

Sorted by: 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 "data-toggle" to bootstrap nav anchor when browser has a certain width - Sta

2 Answers 2

与本文相关的文章

评论列表(0)