Click on only one element

Question

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 Various Plastic Components, he has to show the ul that’s below it, it’s okay, it works, what happens is that the click fires on all the elements. I mean, when I click Various Plastic Components he does the fadeToggle on the other li Mirrors and Mirrors.

How to fix this?

Answer 1

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

I 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 worked perfectly. http://jsfiddle.net/p4q7wohx/1/

Maybe there’s some easier way I don’t know... If you need to change anything please let us know.