Click UL to A

Question

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 wish when I clicked on ul he clicked on to, that’s inside that ul.

I did that, and it didn’t work:

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

Answer 1

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

submenu.ul

And then simulate a click on that element of yours :

.submit to

$(document).on('click','submenu.ul', function(e){
    $(".submenu a").click();
});

Answer 2

You have to set a fução to callback.

Example:

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

Structure of HTML:

<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>

Answer 3

Below I put the code and comments for the action you need. But I do not recommend to do this, because within ul you could have several "a". In this case, it could generate inconsistency in the action of clicks.

$(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>

<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>
</div>