user200806
user200806

Reputation: 41

twitter bootstrap dropdown-toggle disabled not working

The disable part is not working in dropdown-toggle. Here's the code.

       <div class="nav-collapse collapse">
            <ul class="nav">
                <li class="divider-vertical"></li>
                <li><a href="index.html">HOME</a></li>
                <li class="divider-vertical"></li>
                <li><a href="about.html">ABOUT ME</a></li>
                <li class="divider-vertical"></li>
                <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="gallery.html">GALLERY
                <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                      <li><a href="units.html">Unit &amp; Events</a></li>
                      <li><a href="personal.html">Personal</a></li>
                    </ul>
                    </li>
                    <li class="divider-vertical"></li>
                    <li><a href="#"></a></li>
                    <li class="divider-vertical"></li>
                 <li><a href="contact.html">CONTACT</a></li>
                    <li class="divider-vertical"></li>
            </ul>
         </div>

Upvotes: 2

Views: 2637

Answers (1)

MeyerRJ
MeyerRJ

Reputation: 792

When you're disabling links in the menu, you have to add class="disabled" to the list item, and not the anchor.

Links will still be active even if the list item is disabled, so you will have to use javascript or a server-side language to prevent the links from firing. If you're dynamically generating the list, you can set the anchor's href to href="#" or you can do the same with javascript.

http://getbootstrap.com/components/#dropdowns-disabled

                <li class="disabled"><a href="#" title="Disabled Link">HOME</a></li>
                <li><a href="about.html">ABOUT ME</a></li>

jQuery example:

$('li.disabled > a:link').on('click', function(e) { 
  e.preventDefault(); 
});

Upvotes: 2

Related Questions