Click from UL in A

Navigation
0

I have the following structure: 

<div class="submenu">
<ul>
    <li>
        <div class="btn-submenu btn-submenu-xstore"></div>
        <a href="/plataforma-de-ecommerce">xStore - Plataforma de E-commerce</a>
        <div class="submenuDescription">Tecnologia para a realização de vendas de forma prática, segura e completa.</div>
    </li>
</ul>
<ul>
    <li>
        <div class="btn-submenu btn-submenu-b2b"></div>
        <a href="/plataforma-de-ecommerce/b2b">E-commerce B2B Customizado</a>
        <div class="submenuDescription">Solução para vendas a atacado (B2B) destinada à indústrias, distribuidoras, importadoras e atacadistas.</div>
    </li>
</ul>
<ul>
    <li>
        <div class="btn-submenu btn-submenu-marketplace"></div>
        <a href="/plataforma-de-ecommerce/marketplace">Marketplace (Shopping Virtual)</a>
        <div class="submenuDescription">Plataforma de e-commerce para a operação de múltiplas lojas.</div>
    </li>
</ul>

I would like that when I click on the ul it will click on the a

I did that, and it did not work: 

$("submenu.ul").click(function{ $(".submenu a").trigger("click"); })
    
asked by anonymous 13.06.2017 / 15:09

3 answers

2

Below I've put the code and comments for the action you need. But I do not recommend doing this, because inside the ul you could have several "a's". In this case, it could lead to inconsistency in click action. 

$(function() {

  // Pega o evento do clique dentro do ul
  $(".submenu ul").click(function(e) {
  
    // Dispara o clique no a dentro deste ul
    $(this).find('a').click();
    
  })
  
  // Pega o evento do clique dentro do ul o item a
  $(".submenu ul a").click(function(e) {
  
    // Evita que o evento crie um loop infinito
    e.stopPropagation();
    
    // Pega o link do a
    var link = $(this).attr('href');
    
    // Muda de página para o link a
    window.location.href = link;
    
  });
  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="submenu">
<ul>
<li>
    <div class="btn-submenu btn-submenu-xstore"></div>
    <a href="/plataforma-de-ecommerce">xStore - Plataforma de E-commerce</a>
    <div class="submenuDescription">Tecnologia para a realização de vendas de forma prática, segura e completa.</div>
</li>
</ul>
<ul>
<li>
    <div class="btn-submenu btn-submenu-b2b"></div>
    <a href="/plataforma-de-ecommerce/b2b">E-commerce B2B Customizado</a>
    <div class="submenuDescription">Solução para vendas a atacado (B2B) destinada à indústrias, distribuidoras, importadoras e atacadistas.</div>
</li>
</ul>
</div>
    
13.06.2017 / 15:20
2

This is how it works Young: The first line detects a click on the selector:

  

submenu.ul

And then simulates a click on your element:

  

.submenu to 

$(document).on('click','submenu.ul', function(e){
    $(".submenu a").click();
});
    
13.06.2017 / 15:14
2

You have to set a fuction for callback.

  

Example: 

$(".submenu ul").click(function() {
      $(this).find('a').trigger("click");
});
  

HTML structure: 

<ul>
 <li class="submenu">
  <ul>
    <li>
        <div class="btn-submenu btn-submenu-b2b"></div>
        <a href="/plataforma-de-ecommerce/b2b">E-commerce B2B Customizado</a>
        <div class="submenuDescription">Solução para vendas a atacado (B2B) destinada à indústrias, distribuidoras, importadoras e atacadistas.</div>
    </li>
  </ul>
 </li>
</ul>
    
13.06.2017 / 15:15
Error getting element by class (but with ID) Button "hamburger" does not work