Simple click on Jquery does not work

To show and hide when you click on the element you can use the .toggle() function. If you only want to show the element without the option to hide when clicking again, you can use the .show() "function instead 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><ulclass="produtosMenu">
  <li>
    <span>Calotas</span>
    <ul class="produtosSubmenu">
      <li>Modelo 1</li>
    </ul>
  </li>
</ul>

I do not know if I understood your question correctly, but if you want every time that span is clicked the list opens if it is closed and closed if it is open you will need to use the jQuery that does exactly that, even allowing animations to be made.

The example below includes a .toogle() animation and a fade which will prevent that if a user of many clicks followed the .stop() is closing and opening tepetidamente even after the 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>

Use it so it gets easier

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