gwar9 gwar9 - 5 months ago 11
Javascript Question

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

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

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