April 20, 2021

Software Mile.com

Latest Software News and Hacks

Drop down menu with clicks

I am creating a drop down menu that shows a submenu when clicked instead of using hover.

When I click it is displayed as it should be but I would like that when I click on another option the previous one is hidden and not kept open as right now.

In advance, thank you very much to the person who takes the trouble to help me, here is the code I’m working with.

$('.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>


Go to Source of this post
Author Of this post: Gir
Title Of post: Drop down menu with clicks
Author Link: {authorlink}