Estoy creando un menú desplegable que muestra un submenú cuando se hace clic en él en lugar de usar el cursor.

Cuando hago clic, se muestra como debería ser, pero me gustaría que cuando hago clic en otra opción, la anterior se oculte y no se mantenga abierta como en este momento.

De antemano, muchas gracias a la persona que se tomó la molestia de ayudarme, aquí está el código con el que estoy trabajando.

$('.parent a').on("click", function(e) {
  $(this).next('ul').toggle();
  e.stopPropagation();
  e.preventDefault();
});
* {
  margin: 0;
  padding: 0;
  outline: 0;
  box-sizing: border-box;
}

.parent {
  display: block;
  position: relative;
  float: left;
  line-height: 30px;
  background-color: #4FA0D8;
  border-right: #CCC 1px solid;
}

.parent a {
  margin: 10px;
  color: #FFFFFF;
  text-decoration: none;
}

.parent>ul {
  position: absolute;
}

.child {
  display: none;
}

.child li {
  background-color: #E4EFF7;
  line-height: 30px;
  border-bottom: #CCC 1px solid;
  border-right: #CCC 1px solid;
  width: 100%;
}

.child li a {
  color: #000000;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0px;
  min-width: 10em;
}

ul ul ul {
  left: 100%;
  top: 0;
  margin-left: 1px;
}

li:hover {
  background-color: #95B4CA;
}

.parent li:hover {
  background-color: #F0F0F0;
}

.expand {
  font-size: 12px;
  float: right;
  margin-right: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="menu">
  <li class="parent"><a href="#">Popular Toys</a>
    <ul class="child">
      <li class="parent"><a href="#">Video Games <span class="expand">»</span></a>
        <ul class="child">
          <li><a href="#">Car</a></li>
          <li><a href="#">Bike Race</a></li>
          <li><a href="#">Fishing</a></li>
        </ul>
      </li>
      <li><a href="#">Barbies</a></li>
      <li><a href="#">Teddy Bear</a></li>
      <li><a href="#">Golf Set</a></li>
    </ul>
  </li>
  <li class="parent"><a href="#">Recent Toys</a>
    <ul class="child">
      <li><a href="#">Yoyo</a></li>
      <li><a href="#">Doctor Kit</a></li>
      <li class="parent"><a href="#">Fun Puzzle<span class="expand">»</span></a>
        <ul class="child">
          <li><a href="#" nowrap>Cards</a></li>
          <li><a href="#" nowrap>Numbers</a></li>
        </ul>
      </li>
      <li><a href="#">Uno Cards</a></li>
    </ul>
  </li>
  <li class="parent"><a href="#">Toys Category</a>
    <ul class="child">
      <li><a href="#">Battery Toys</a></li>
      <li class="parent"><a href="#">Remote Toys <span class="expand">»</span></a>
        <ul class="child">
          <li><a href="#">Cars</a></li>
          <li><a href="#">Aeroplane</a></li>
          <li><a href="#">Helicopter</a></li>
        </ul>
      </li>
      <li><a href="#">Soft Toys</a>
      </li>
      <li><a href="#">Magnet Toys</a></li>
    </ul>
  </li>
</ul>
2
Gir 5 mar. 2021 a las 23:54

2 respuestas

La mejor respuesta

Mueva la lógica de visualización al selector ".active" en css,

.active {
    display: block;
}

Luego intente la siguiente secuencia de comandos.

Verificaría si el clic no está dentro del menú actual, si el clic está en cualquier lugar menos en el menú actual, se eliminará la clase activa.

var menu = $('.parent a').next('ul')

$(document).mouseup(e => {
    if (!menu.is(e.target) // if the target of the click isn't the container...
        && menu.has(e.target).length === 0) // ... nor a descendant of the container
        {
            menu.removeClass("active");
        }
    });

$('.parent a').on("click", function (e) {
    $(this).next('ul').toggleClass("active");
    e.stopPropagation();
    e.preventDefault();
});

Aquí está el código completo,

var menu = $('.parent a').next('ul')

$(document).mouseup(e => {
    if (!menu.is(e.target) // if the target of the click isn't the container...
        && menu.has(e.target).length === 0) // ... nor a descendant of the container
    {
        menu.removeClass("active");
    }
});

$('.parent a').on("click", function (e) {
    $(this).next('ul').toggleClass("active");
    e.stopPropagation();
    e.preventDefault();
});
* {
  margin: 0;
  padding: 0;
  outline: 0;
  box-sizing: border-box;
}

.parent {
  display: block;
  position: relative;
  float: left;
  line-height: 30px;
  background-color: #4FA0D8;
  border-right: #CCC 1px solid;
}

.parent a {
  margin: 10px;
  color: #FFFFFF;
  text-decoration: none;
}

.parent>ul {
  position: absolute;
}

.child {
  display: none;
}

.active {
    display: block;
}

.child li {
  background-color: #E4EFF7;
  line-height: 30px;
  border-bottom: #CCC 1px solid;
  border-right: #CCC 1px solid;
  width: 100%;
}

.child li a {
  color: #000000;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0px;
  min-width: 10em;
}

ul ul ul {
  left: 100%;
  top: 0;
  margin-left: 1px;
}

li:hover {
  background-color: #95B4CA;
}

.parent li:hover {
  background-color: #F0F0F0;
}

.expand {
  font-size: 12px;
  float: right;
  margin-right: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="menu">
  <li class="parent"><a href="#">Popular Toys</a>
    <ul class="child">
      <li class="parent"><a href="#">Video Games <span class="expand">»</span></a>
        <ul class="child">
          <li><a href="#">Car</a></li>
          <li><a href="#">Bike Race</a></li>
          <li><a href="#">Fishing</a></li>
        </ul>
      </li>
      <li><a href="#">Barbies</a></li>
      <li><a href="#">Teddy Bear</a></li>
      <li><a href="#">Golf Set</a></li>
    </ul>
  </li>
  <li class="parent"><a href="#">Recent Toys</a>
    <ul class="child">
      <li><a href="#">Yoyo</a></li>
      <li><a href="#">Doctor Kit</a></li>
      <li class="parent"><a href="#">Fun Puzzle<span class="expand">»</span></a>
        <ul class="child">
          <li><a href="#" nowrap>Cards</a></li>
          <li><a href="#" nowrap>Numbers</a></li>
        </ul>
      </li>
      <li><a href="#">Uno Cards</a></li>
    </ul>
  </li>
  <li class="parent"><a href="#">Toys Category</a>
    <ul class="child">
      <li><a href="#">Battery Toys</a></li>
      <li class="parent"><a href="#">Remote Toys <span class="expand">»</span></a>
        <ul class="child">
          <li><a href="#">Cars</a></li>
          <li><a href="#">Aeroplane</a></li>
          <li><a href="#">Helicopter</a></li>
        </ul>
      </li>
      <li><a href="#">Soft Toys</a>
      </li>
      <li><a href="#">Magnet Toys</a></li>
    </ul>
  </li>
</ul>
0
Adharsh M 5 mar. 2021 a las 21:33

Podrías intentar con

$('.parent a').on("click", function (e) {
    $('.parent ul').hide();
    $(this).next('ul').toggle();
    e.stopPropagation();
    e.preventDefault();
});
0
Bo Wahlstrøm 5 mar. 2021 a las 21:09