href links not opening, bootstrap add open class to dropdown menu when click instead of opening link

Question

Any ideas how to fix? This applies to the "Animations" and "Education" links. Click these should open a new page, but bootstrap.min just adds the .open class.

HTML

<li class="dropdown cases videos">
        <a class="dropdown-toggle" href="videos.html" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" id="main-nav">Animations</a>
          <ul class="dropdown-menu cases-body videos-drop">
            <p style="padding-top:15px;" class="category-cases"><a href="Vid_Waste.html">Building a Park Out of Waste</a></p>
            <p class="category-cases"><a href="Vid_ActiveLiving.html">Designing for Active Living</a></li>
            <p class="category-cases"><a href="Vid_Wildlife.html">Designing Neighborhoods for People and Wildlife</a></p>
            <p class="category-cases"><a href="Vid_UrbanAg.html">The Edible City</a></li>
            <p class="category-cases"><a href="Vid_Energy.html">Energy Efficient Home Landscapes</a></p>
            <p class="category-cases"><a href="Vid_Brownfields.html">From Industrial Wasteland to Community Park</a></p>
            <p class="category-cases"><a href="Vid_Infrastructure.html">Infrastructure for All</a></p>
            <p class="category-cases"><a href="Vid_WaterManagement.html">Leveraging the Landscape to Manage Water</a></p>
            <p class="category-cases"><a href="Vid_Parks.html">Revitalizing Communities with Parks</a></p>
            <p class="category-cases"><a href="Vid_UrbanForests.html">Urban Forests = Cleaner, Cooler Air</a></p>
          </ul>
      </li>
      <li class="dropdown cases educations">
        <a class="dropdown-toggle" href="education.html" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" id="main-nav">Education</a>
          <ul style="padding-right:0;" class="dropdown-menu cases-body educations-drop">
            <p style="padding-top:15px; " class="category-cases"><a href="Ed_Brownfields.html">Brownfield Restoration / Ecosystem Rehabilitation</a></p>
            <p class="category-cases"><a href="Ed_ActiveLiving.html">Design for Active Living</a></p>
            <p class="category-cases"><a href="Ed_Wildlife.html">Designing for Biodiversity</a></p>
            <p class="category-cases"><a href="Ed_Energy.html">Energy Efficiency</a></p>
            <p class="category-cases"><a href="Ed_WaterManagement.html">Green Infrastructure</a></p>
            <p class="category-cases"><a href="Ed_Waste.html">Incorporating Sustainable Materials</a></p>
            <p class="category-cases"><a href="Ed_Infrastructure.html">Transforming Transportation Infrastructure</a></p>
            <p class="category-cases"><a href="Ed_UrbanAg.html">Urban Agriculture</a></p>
            <p class="category-cases"><a href="Ed_UrbanForests.html">Urban Forestry</a></p>
            <p class="category-cases"><a href="Ed_Parks.html">Urban Parks</a></p>
          </ul>
        </li>

I tried this script but it didnt work.

$('.dropdown .dropdown-toggle a').on('click', function(e) {
e.preventDefault();
window.location.href = $(this).attr('href');
})

Any ideas?

Site is here

Answer 1

Your selector is incorrect

You have:

$('.dropdown .dropdown-toggle a')

which is looking for a tags inside of .dropdown-toggle class elements, but it is actually your a tag that has the class.

You want:

$('.dropdown a.dropdown-toggle')

to select a elements with the .dropdown-toggle class

Answer 2

Just remove "data-toggle="dropdown"", But as say gwar9 in the comment that will prevent dropdown opening on mobile. So if you want that work for both you need detect if the device is mobile or not if it is not you erase the data toggle attribute.

Answer 3

I've created a jsfiddle to demonstrate how you could meet your requirements.

http://jsfiddle.net/DarrenS/pcav6v1g/

As you explained, you have a UX requirement to allow the following;

1. On Hover of the main menu, expand the menu to show sub menu items.
2. On Click of the main menu, follow the main menu link.

I explained that this is not default Bootstrap behaviour and the limitation of hover on touch devices.

To implement this solution I am using Modernizr to detect touch and then adding some custom jQuery to attach hover() and click() events to the menu.

I've implemented it this way because I still wanted to allow larger touch devices (such as a tablet) to access the sub menu. Which they wouldn't be able to do if you simply added a click event handler to the main menu.

 //Non-Touch devices //Hover expands menu (non default Bootstrap behaviour) $('html.no-touch div.btn-group').hover(function(e) { $(this).toggleClass('open'); }); //Non-Touch devices //Click follows main link (non default Bootstrap behaviour) $('html.no-touch div.btn-group a.dropdown-toggle').on('click', function(e) { e.preventDefault(); window.location.href = $(this).attr('href'); }) //Touch devices //Touch (click) expands menu (default Bootstrap behaviour) //Touch devices //Allow touch (click) to follows main link when menu open (non default Bootstrap behaviour) $('html.touch div.btn-group.open a.dropdown-toggle').on('click', function(e) { e.preventDefault(); window.location.href = $(this).attr('href'); }) 

 .dropdown-menu{ margin-top: 0; } 

 <div class="btn-group"> <a href="/page.html" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Google <span class="caret"></span> </a> <ul class="dropdown-menu"> <li><a href="/page.html">Facebook</a></li> <li><a href="/page.html">Twitter</a></li> <li><a href="/page.html">LinkedIn</a></li> </ul> </div> 

Answer 4

I encountered this issue too, but realised that changing the behaviour would make the site harder to use for mobile users (who don't have a mouse to hover over controls). So, instead I inserted an "Overview" entry to the drop-down menu that links to the parent page. This makes the parent page clickable on all device types.

Details here: https://keasigmadelta.co.nz/blog/the-bootstrap-drop-down-menu-solution