Boostrap: How can I update my navigation menu so that the links that trigger submenus are only clickable when submenus are expanded?

I'm currently redesigning a client's website using the Bootstrap framework:

http://dev.machineryassociates.com/index2015.php

As you'll see, I've successfully implemented the following vertical menu on this site:

http://www.jqueryscript.net/menu/Bootstrap-Style-Vertical-Accordion-Menu-with-jQuery-CSS3-bs-leftnavi.html
http://www.jqueryscript.net/demo/Bootstrap-Style-Vertical-Accordion-Menu-with-jQuery-CSS3-bs-leftnavi/

The problem that I'm having is that the links that have "+" signs beside them are supposed to both trigger the displaying of their associated submenus AND be clickable to their own pages --- yet only when the submenu is expanded.  

For example, .. when you click on the "Clamping Equipment" link in the righthand menu the first time, all it should do is expand the submenu that corresponds to it (to reveal the subcategory links).  When you click on the "Clamping Equipment" link the 2nd time (while it's submenu is still expanded), however, it should then take you to the page that it's linking to:

http://dev.machineryassociates.com/Clamping-Equipment-For-Sale-C16

How can I accomplish this using either Bootstrap or JQuery?

Thanks,
- Yvan
egoselfaxisAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

egoselfaxisAuthor Commented:
Anyone?
lenamtlCommented:
Try to remove the ahref content and replace by #

Find
<a href="Clamping-Equipment-For-Sale-C16"><span class="glyphicon glyphicon-plus" aria-hidden="true" style="display:inline;font-size:12px;color:#CC3333;margin-right:15px;"></span><span class="gw-menu-text">Clamping Equipment</span> <b class="gw-arrow"></b> </a>

Open in new window


Change it to this
<a href="#"><span class="glyphicon glyphicon-plus" aria-hidden="true" style="display:inline;font-size:12px;color:#CC3333;margin-right:15px;"></span><span class="gw-menu-text">Clamping Equipment</span> <b class="gw-arrow"></b> </a>

Open in new window

egoselfaxisAuthor Commented:
Umm .. no.  That's not at all what I asked.
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

lenamtlCommented:
If you want to keep the link on the parent menu you will need to adapt the javascript.
Which menu script do you use?

Example:
Most of the time the parent menu does not have a link.
See the popular Metis Menu for example
http://demo.onokumus.com/metisMenu/#

Metis Menu with the option to have a link on parent using hash
https://github.com/onokumus/metisMenu/issues/39
https://gist.github.com/onokumus/224181ad4627b709cdc0
egoselfaxisAuthor Commented:
Please read my original post.  I was very clear about exactly what menu script it is that I'm using and what it is that I'm trying to accomplish.
Slick812Commented:
greetings egoselfaxis, , I am reluctant to offer fixes, mostly because of your requirements of, "to both trigger the displaying of their associated submenus AND be clickable to their own pages". .

I have been to many many sites wid vertical menus and that menu does what most do, as it just opens and closes the sub menus. You could change this with dificulty, But what I would do is just add a TOP link in the sub menu that says
   "All Campin Equipent" and link 2 ur  http://dev.machineryassociates.com/Clamping-Equipment-For-Sale-C16. . .

For me, I think this would be better understood by many users, that expect the + to show and hide the sub, I would not even think of a second click to the " + Campin Equipment " to show all of the equipment,
 just don't think your users would either.
RobOwner (Aidellio)Commented:
I'll work on a solution for you if you can get it working yourself but essentially you need to capture the event of each chock of a menu item.
E.g. $("a.menu").on("click", function(e) {...}
In that function check if the menu is open (usually a class is toggled on the parent). If it is open or has no children then do nothing and the user continues to that page.
On the other hand, if it's closed and has a sub menu then call e.preventDefault() and it will block the default action of the anchor tag, namely going to the associated url. This does not stop the event propagating, which you want it to do, as you still want the menu to expand.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
egoselfaxisAuthor Commented:
Hi Rob.  I actually presented the updated site to my client the other day, and as it turned out .. he didn't even care about the parent links not being click-able.  So I've since moved on and won't be spinning my wheels on this any longer.  Still .. I'm sure I'll be posting here again in the coming weeks.  Thanks again for your help.  Have a great holiday.

- Yvan
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.