Code to use jquery to make parent menu item to be clickable - php

Question

On the page: Make parent menu clickable, the jquery:
jQuery(document).ready(function() {
jQuery('ul li > a.dropdown-toggle').addClass('disabled');
});
...was given as an alternate solution. What I'd like to know is, can one then just add "....addClass('enabled');" instead, to make the parent menu item clickable?
I don't want to put a custom link in the menu, I don't want to modify bootstrap files, I don't want to modify any other files except the external jquery (".js") file in my own WordPress Theme, as well as my theme files (header.php, page.php, etc.) of course.
I have tried to add the dropdown-toggle class to the wp_nav_menu like this:
menu_class' => 'list_no_decoration dropdown-toggle',
and then simply modified the above code to:
jQuery('ul li > a.dropdown-toggle').addClass('enabled');
But sadly, the parent menu item is still not clickable. I really like this solution as it is very simple and can easily be repeated in other themes i end up designing.
My current code looks as follows:
header.php
<div class="container-fluid" id="header_nav">
<div class="row" id="main_nav_row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" id="header_nav_col">
<span class="glyphicon glyphicon-chevron-up"></span><span class="glyphicon glyphicon-chevron-down"></span>
<?php
wp_nav_menu(
array(
'sort_column' => 'menu_order',
'menu' => 'Categories',
'container_class' => 'main-menu',
'container_id' => 'header',
'theme_location' => 'header',
'menu_class' => 'list_no_decoration',
'menu_id' => 'top_nav',
)
);
?>
</div>
</div>
</div>
style.css
ul.list_no_decoration { /* "list_no_decoration" as per menu_class in wp_nav_menu */
list-style: none;
border:0; /* Reset */
margin:0; /* Reset */
padding:0; /* Reset */
outline:0; /* Reset */
}
ul.list_no_decoration#top_nav {
vertical-align: top;
top:0;
width:99.9%;
padding-left: 0.05%;
margin: 0 auto;
display: inline-block;
font-size: 0;
text-align: center;
}
ul.list_no_decoration#top_nav li {
display: inline-block;
vertical-align: top;
border: 1px solid white;
padding: 0 10px;
line-height: 30px;
height: 30px;
width: 120px;
}
ul.list_no_decoration#top_nav li a {
font-size: 10pt;
font-weight: bold;
color: #fff;
text-decoration: none;
}
ul.list_no_decoration#top_nav li > a:link {
}
ul.list_no_decoration#top_nav a:visited {
font-size: 14pt;
text-decoration: none;
color: #fff;
}
ul.list_no_decoration#top_nav a:active {
font-size: 14pt;
text-decoration: none;
color: #fff;
}
ul.list_no_decoration#top_nav > li > a:hover {
}
/* sub-level menu item */
ul.sub-menu {
position: absolute;
width: 120px;
border:0; /* Reset */
margin:0; /* Reset */
padding:0; /* Reset */
outline:0; /* Reset */
}
ul.sub-menu li {
position: relative;
display: block;
border:0; /* Reset */
margin:0; /* Reset */
padding:0; /* Reset */
outline:0; /* Reset */
top: 30px;
left: -11px;
background-color:black;
}
ul.list_no_decoration#top_nav > li ul {
vertical-align: top;
top: 0;
border:0; /* Reset */
margin:0; /* Reset */
padding:0; /* Reset */
outline:0; /* Reset */
display: none; /* display: none; to make it invisible until hover */
}
ul.list_no_decoration#top_nav > li:hover ul {
display: block;
}
Here's what the menu currently looks like:
enter image description here

Answer 1

just make your HTML like this dont put <a href=" "> in your dropdown only the parent menu
<nav>
<ul id="menu">
<li>MENU
<ul>
<li>display 1</li>
<li>display 2</li>
<li>display 3</li>
<li>display 4</li>
</ul>
</li>
</ul>
</nav>