CODEWITHSUNDEEP
javascriptjquery
raduken
raduken

Reputation: 2129

jquery Menu State using the parent class

Hi guys I have this menu in jquery right, that works perfect, but I still think I can refractory the jquery instead use class="btn-accordion" for each li i would like remove this and just use the main class="accordion-menu"

its that possible or that code is ok?

thank you.

html:

<div class="accordion-menu">
    <ul class="" role="tabpanel">
      <li class="btn-accordion is-active">
        <a class="menu-toggle" data-toggle="tooltip" data-placement="bottom" title="home">
          <i class="fa fa-bars fa-2x" aria-hidden="true"></i>
        </a>
      </li>
      <li class="btn-accordion"><a href=""><i class="fa fa-search fa-2x" aria-hidden="true"></i></a></li>
      <li class="btn-accordion"><a href=""><i class="fa fa-info-circle fa-2x" aria-hidden="true"></i></a></li>
      <li class="btn-accordion"><a class="filter-toggle"><i class="fa fa-filter fa-2x" aria-hidden="true"></i></a></li>
    </ul>
  </div>

jquery

$('.btn-accordion').on('click', function() { 
        $(this).closest('li').toggleClass('is-active');
  });

scss:

.btn-accordion {
  color: red;
  background-color: blue;
  .fa {
    color: white;
  }
  &.is-active {
    color: blue;
    background-color: red;
    .fa {
      color: yellow;
    }
  }
}

EDIT:

sorry guys I was not so clear I want remove the class: class="btn-accordion" in each <li> i just use the main class <div class="accordion-menu"> to do my jquery understand?

Upvotes: 0

Views: 719

Answers (2)

Mohammad
Mohammad

Reputation: 21499

You can use this simple code

$(".accordion-menu").on("click", function(e) { 
    if (e.target.nodeName == "A" || e.target.nodeName == "I")
        $(e.target).closest("li").toggleClass("is-active");
    else if (e.target.nodeName == "LI")
        $(e.target).toggleClass("is-active");       
});
.is-active {
    background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="accordion-menu">
<ul>
    <li>
        <a>
            <i>&#9829;</i>
        </a>
    </li>
    <li>
        <a>
            <i>&#9829;</i>
        </a>
    </li>
    <li>
        <a>
            <i>&#9829;</i>
        </a>
    </li>
    <li>
        <a>
            <i>&#9829;</i>
        </a>
    </li>
</ul>
</div>

Upvotes: 1

Rudi
Rudi

Reputation: 2995

Use event delegation:

$('.accordion-menu').on('click', '.btn-accordion', function () {
  $(this).addClass('is-active').siblings().removeClass('is-active');
});

Edit: If you want to remove the class btn-accordion you can do that by replacing all .btn-accordion by .accordion-menu li in jQuery and CSS code

Upvotes: 1

Related Questions