Simple click on Jquery does not work

Question

I want that when I click on span to ul appear. The correct thing is to use the Parent, nay?

$(".produtosMenu li span").click(function() {
  $(".produtosSubmenu").parent().addClass("dpb");
});

.produtosMenu li {
  box-sizing: border-box;
  -webkit-transition: background-color .5s;
  /* For Safari 3.1 to 6.0 */
  transition: background-color .5s;
  cursor: pointer;
}
.produtosMenu li span {
  font: 700 13px/40px"open sans";
  color: #fff;
  padding-left: 15px;
  background: #003a57;
  width: 240px;
  height: 40px;
  display: inline-block;
  text-transform: uppercase;
}
.produtosMenu li span:hover {
  background: url("../imagens/detalhesFlecha.png") #006ba1 no-repeat 210px 14px;
}
.produtosSubmenu {
  padding: 20px;
  display: none;
}
.produtosSubmenu li {
  font: 400 16px/16px"open sans";
  color: #16232e;
}
.produtosSubmenu li:hover {
  font: 600 16px/16px"open sans";
  color: #006ba1;
}
.dpb {
  display: block;
}
.dpn {
  display: none;
}

<ul class="produtosMenu">
  <li>
    <span>Calotas</span>
    <ul class="produtosSubmenu">
      <li>Modelo 1</li>
    </ul>
  </li>
</ul>

Answer 1

To show and hide by clicking on the element you can use the function .toggle(). If you only want to show the element without the option to hide when clicking again, you can use the function .show() in place of .toggle()

Example:

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="produtosMenu">
  <li>
    <span>Calotas</span>
    <ul class="produtosSubmenu">
      <li>Modelo 1</li>
    </ul>
  </li>
</ul>

Answer 2

I’m not sure I understand your question, but in case you want every time span be clicked the open list if it is closed and close if it is open you will need to use the function .toogle() of jQuery that does just that allowing even animations to be made.

In the example below includes an animation fade and a .stop() which will prevent U user case from many clicks followed to ul keep closing and opening tepetimente even after clicks stop.

jQuery

$(".produtosMenu li span").click(function() {
  $(".produtosSubmenu").stop().toggle("fade");
});

Css

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

Html

<ul class="produtosMenu">
  <li>
    <span>Calotas</span>
    <ul class="produtosSubmenu">
      <li>Modelo 1</li>
    </ul>
  </li>
</ul>

Answer 3

It makes it easier to use

$(".produtosMenu li span").click(function() {
  $(this).siblings("ul").toggle();
});