Open and close menu

Question

I have the following menu, which works when the screen is with width: 768px or less. When I click on fa-bars, he disappears and shows the fa-times. Opening the menu. So far so good. I want when I click on fa-bars it hides the menu again and shows the fa-bars.

$('header nav div.menuMobile').click(function(event) {
  event.preventDefault();
  $('header nav div.menuMobile ul').show(300);
  $('.fa-bars').hide(300);
  $('.fa-times').show(300);
});

$('.fa-times').click(function(event) {
  event.preventDefault();
  $('header nav div.menuMobile ul').show(300);
  $('.fa-times').hide(300);
  $('.fa-bars').show(300);
});

header nav ul,
header nav a img {
  display: none
}

.menuMobile {
  display: block
}

.menuMobileClose {
  display: block
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  <nav>
    <div class="menuMobile">
      <i class="fa fa-bars" aria-hidden="true"></i>
      <i style="display:none" class="fa fa-times" aria-hidden="true"></i>
      <img src="assets/images/layout/logo.png">
      <ul>
        <li>
          <a href="link">Home</a>
        </li>
        <li>
          <a href="link">Quem Somos</a>
        </li>
        <li>
          <a href="link">Contato</a>
        </li>
        <li>
          <a href="link">E-commerce</a>
          <div class="submenu">
            <ul>
              <li>
                <a href="">Plataformas E-commerce</a>
              </li>
              <li>
                <a href="">Lojas virtuais customizadas</a>
              </li>
              <li>
                <a href="">Solução virtual para venda</a>
              </li>
            </ul>
          </div>
        </li>
      </ul>
    </div>
  </nav>
</header>

Answer 1

I made this example with some basic changes. Give more focus to my JS changes because otherwise I had to change your code to work here on the site. I also removed the logo because it was a broken image that was on the menu.

$('.fa-bars').click(function(event) {
  event.preventDefault();
  $('header nav div.menuMobile ul').show(300);
  $('.fa-bars').hide(300);
  $('.fa-times').show(300);
});

$('.fa-times').click(function(event) {
  event.preventDefault();
  $('header nav div.menuMobile ul').hide(300);
  $('.fa-times').hide(300);
  $('.fa-bars').show(300);
});

header nav ul,
header nav a img {
  display: none
}

.menuMobile {
  display: block
}

.menuMobileClose {
  display: block
}

div.fa-times {
  width: 10px;
  height: 10px;
  background: black;
  cursor: pointer;
}

div.fa-bars {
  width: 10px;
  height: 10px;
  background: red;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  <nav>
    <div class="menuMobile">
      <div class="fa fa-bars" aria-hidden="true"></div>
      <div style="display:none" class="fa fa-times" aria-hidden="true"></div>
      <ul>
        <li>
          <a href="link">Home</a>
        </li>
        <li>
          <a href="link">Quem Somos</a>
        </li>
        <li>
          <a href="link">Contato</a>
        </li>
        <li>
          <a href="link">E-commerce</a>
          <div class="submenu">
            <ul>
              <li>
                <a href="">Plataformas E-commerce</a>
              </li>
              <li>
                <a href="">Lojas virtuais customizadas</a>
              </li>
              <li>
                <a href="">Solução virtual para venda</a>
              </li>
            </ul>
          </div>
        </li>
      </ul>
    </div>
  </nav>
</header>