This happens because your selector is very generic. When doing:
$('.menu-lateral li a').click(function(){......
You are selecting all links ( a
), that are within li
within .menu-lateral
. Without specifying at what level. That makes it apply to all links within li
. And how do you have a event.preventDefault()
the link action will not be executed.
For example, your structure is something like this:
ul.menu-lateral
li
a <------------- el selector afectará a este link
ul
li
a <----- y también a éste
To do what you are looking for, you should make the selector more specific, using >
which means that it will be a direct descendant. In this case, the selector you want to use would be like this:
$('.menu-lateral > li > a').click(function(){
And with your structure it would be selected like this:
ul.menu-lateral
li
a <------------- el selector afectará a este link y sólo a éste
ul
li
a
Update: Since your menu has sub-levels, the selector I suggest above will not work correctly. What you can do is chromate if the pulsed link is a leaf node (it does not have more sublevels), and if it is not, execute the code. In this way, if it is a leaf node, it will be executed, it will go to href
normally.
To check if you have sub-menus, you should check if any of your siblings have the "sub-menu" class using .siblings(".sub-menu")
.
Here is an example (note that I have removed the target="_blank"
and corrected the URL ... and even then it will not work for security reasons):
$('.menu-lateral .sub-menu').hide();
$('.menu-lateral li a').click(function(event){
if ($(this).siblings(".sub-menu").length > 0) {
event.preventDefault();
$(this).siblings('.sub-menu').slideToggle('slow');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu-lateral">
<li><a href="#">Menu 1</a>
<ul class="sub-menu">
<li><a href="#">Sub Menu 2</a>
<ul class="sub-menu">
<li><a href="#">Sub sub Menu 3</a>
<ul class="sub-menu">
<li><a href="http://www.google.com">Titulo no puede abrir link :( </a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>