Click on one element only

Question

Click on one element only

Navigation

#1 by (3 votes)

2

I have the following structure:

$(".produtosMenu li span").click(function() {
  $(".produtosSubmenu").fadeToggle();
});

.produtosMenu li {
  box-sizing: border-box;
  -webkit-transition: background-color .5s;
  /* For Safari 3.1 to 6.0 */
  transition: background-color .5s;
  cursor: pointer;
  margin-bottom: 5px;
}
.produtosMenu li span {
  font: 700 11px/40px"open sans";
  color: #fff;
  padding-left: 15px;
  background: #003a57;
  width: 240px;
  height: 40px;
  display: inline-block;
  text-transform: uppercase;
  box-sizing: border-box;
}
.produtosSubmenu {
  padding: 5px 20px 5px 20px;
  display: none;
}
.produtosSubmenu li {
  font: 400 16px/16px"open sans";
  color: #16232e;
}
.produtosSubmenu li:hover {
  font: 600 16px/16px"open sans";
  color: #006ba1;
}

<ul class="produtosMenu margin-top-45">
  <li page="produtos/componentes-plasticos-diversos/" family="16" class="father plus">
    <span class="produtosMenuClick">Componentes Plásticos Diversos</span>
  </li>
  <li page="produtos/componentes-plasticos-diversos/teste-1/" family="16" children="38" class="son1 plus">
    <ul style="display: none;" class="produtosSubmenu">
      <li onclick="window.location='/produtos/componentes-plasticos-diversos/teste-1/'">
        <a href="/produtos/componentes-plasticos-diversos/teste-1/">Teste 1</a>
      </li>
    </ul>
  </li>
  <li page="produtos/espelhos-retrovisores/" family="14" class="father plus">
    <span>Espelhos Retrovisores</span>
  </li>
  <li page="produtos/espelhos-retrovisores/teste-2/" family="14" children="39" class="son1 plus">
    <ul style="display: none;" class="produtosSubmenu">
      <li onclick="window.location='/produtos/espelhos-retrovisores/teste-2/'">
        <a href="/produtos/espelhos-retrovisores/teste-2/">Teste 2</a>
      </li>
    </ul>
  </li>
</ul>

When I click on span Miscellaneous Plastic Components , it has to show the ul that is below it, okay, this works, what happens is that the click triggers all the elements. That is, when I click on Miscellaneous Plastic Components it fadeToggle on the other% Mirrors and Mirrors .

How do I fix this?

jquery

asked by anonymous 26.02.2015 / 15:07

1 answer

Dynamically creating id's Is it possible to work with a local "community" repository in Git?

score 3 · Accepted Answer

If you allow me to change your code a bit I think the following would fit for you:

I've changed your javascript to the following:

$(document).on('click', ".produtosMenu li span", function() {
    var index = $(this).closest('li').index('li') + 1;
    $('li').eq(index).find('ul.produtosSubmenu').fadeToggle();
});

Here it worked perfectly. link

It may have some easier way that I do not know ... If you need to change anything, please let me know.