You can not open the link in menu

2

at the end when click can not open a link ( <a href="www.google.com"> )

$('.menu-lateral .sub-menu').hide();
	
$('.menu-lateral li a').click(function(){
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 target="_blank" href="www.google.com">Titulo no puede abrir link :( </a></li>

                        </ul>

                    </li>

                </ul>

            </li>

        </ul>

    </li>

</ul>
    
asked by Diego Sagredo 05.01.2017 в 20:28
source

4 answers

2

First:

  • event.preventDefault (); what it does is to prevent it from doing the action it normally does, to replace it with the action of the script. Therefore delete that line
  • The url should be like this: href="http://www.google.com" or else you will search it within your domain.

I'll leave your modified code:

<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" target="_blank">Titulo</a></li>

                        </ul>

                    </li>

                </ul>

            </li>

        </ul>

    </li>

</ul>

<script>
$('.menu-lateral .sub-menu').hide();
	
$('.menu-lateral li a').click(function(){

$(this).siblings('.sub-menu').slideToggle('slow');
});
</script>
    
answered by 05.01.2017 / 20:37
source
3

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>
    
answered by 05.01.2017 в 20:40
1

Basically because you're preventing me from doing it

event.preventDefault();

to that last league you can place a class

<a class="liga" target="_blank" href="www.google.com">Titulo no puede abrir link :( </a>

and in the js you can do

if(!this.hasClass('liga'))
    event.preventDefault();
    
answered by 05.01.2017 в 20:38
1
<li><a target="_blank" href="http://www.google.com">Titulo SÍ puede abrir link :) </a></li>

And you eliminate this: event.preventDefault();

    
answered by 05.01.2017 в 20:44