jQuery addClass example

Change class name on click in jQuery

by Dmitri Ganenco

HTML

<ul class='dropdown'>
  <li class='top-level'><a href="/en">Home</a></li>
  <li class='top-level'>
    <a href="">Products</a>
    <ul class='second-level'>
      <li>
        <a href="#">Black lion</a>

        <ul>

          <li><a href="">TBR</a></li>
          <li><a href="">PCR</a></li>

        </ul>
      </li>
    </ul>
  </li>
  <li class='top-level'><a href="">Catalog</a>
    <ul class='second-level'>
      <li>
        <a href="#">Black Lion Catalog</a>
        <ul>
          <li>
            <a href="#">pcr</a>
          </li>
          <li>
            <a href="#">tbr</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="#">Otani Catalog</a>
        <ul>
          <li>
            <a href="#">pcr</a>
          </li>
          <li>
            <a href="#">tbr</a>
          </li>
        </ul>
      </li>
      <li><a href="#">Nitto</a></li>
      <li><a href="#">Persia</a></li>
      <li><a href="#">Birla</a></li>
    </ul>
  </li>
</ul>
<form class="search-box">
  <input type="text" placeholder="Search">
  <button type="submit"><i class="fa fa-search"></i></button>
</form>

JavaScript

$(".dropdown a").click(function(e) {
  debugger;
	e.preventDefault();
  $(this).closest('.dropdown').find('.second-level').hide();
});