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

Fix is probably not the right word to use, it is the default behavior of Bootstrap Dropdown buttons to simply add a class to reveal the list items. getbootstrap.com/components/#btn-dropdowns you are wanting to change the default behavior. — Darren S
– Darren S, Commented Dec 4, 2015 at 2:59
@DarrenS my navigation is a bit complex, I don't think adding another class is going to do it. — gwar9
– gwar9, Commented Dec 4, 2015 at 3:01
Your demo website reveals your menu on hover, this is not default bootstrap behavior. Before you try to change Bootstrap's functionality I would ask you to consider how a touch device such as a tablet will expand your menu when it has no hover state? — Darren S
– Darren S, Commented Dec 4, 2015 at 3:03
@Darren S the mobile menu expands on touch those scripts have been added already. — gwar9
– gwar9, Commented Dec 4, 2015 at 3:04
I'm not referring to small screen touch devices such as mobiles. Consider a tablet. — Darren S
– Darren S, Commented Dec 4, 2015 at 3:05

Eric Phillips · Accepted Answer · 2015-12-04 03:08:58Z

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

answered Dec 4, 2015 at 3:08

Eric Phillips

9201 gold badge7 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

gwar9 Over a year ago

that doesnt make a difference for me, same thing happens.

Eric Phillips Over a year ago

Check to make sure you don't have a space between a and .dropdown-toggle

gwar9 Over a year ago

this did end up working but I has to add window match media query

Z. Clément · Accepted Answer · 2015-12-04 03:10:39Z

0

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.

edited Dec 4, 2015 at 3:10

answered Dec 4, 2015 at 2:51

Z. Clément

4744 silver badges16 bronze badges

2 Comments

gwar9 Over a year ago

data toggle is necessary for the mobile drawer menu. if i remove it the user can not access the sub menu

Z. Clément Over a year ago

Yes I agree with you sorry I didn't developed my answer, that will have bad effect on the mobile version, but the data toggle prevent the default behaviour of the link.

Darren S · Accepted Answer · 2015-12-04 04:45:44Z

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;

On Hover of the main menu, expand the menu to show sub menu items.
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>

thank you and sorry for the delay. That script did not achieve what I wanted. I've constructed a fiddle jsfiddle.net/gward90/b25jgyox/9

Hans de Ruiter · Accepted Answer · 2016-06-23 01:37:33Z

0

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

answered Jun 23, 2016 at 1:37

Hans de Ruiter

667 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

3 Comments

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related