CODEWITHSUNDEEP
javascriptjqueryhtml
PalakM
PalakM

Reputation: 321

Jquery event is fired for all button having same class name rather than current selected button

Basically when i click on first .menu-btn it should be called for only first .dropdown please note this content is generated on the fly, so I can't use different ids for all

$(document).ready(function() {
  $(".menu-btn").click(function() {
    $(".dropdown").toggleClass('expand');
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="table table-striped">
  <tr>
    <th>&nbsp;</th>
    <th>Col 1</th>
    <th>Col 2</th>
    <th>Col 3</th>
  </tr>
  <tr>
    <td>
      <div class="mobile-nav" style="border:0px solid red">
        <div class="menu-btn" id="menu-btn">
          <div></div>
          <span></span>
          <span></span>
          <span></span>
        </div>

        <div class="dropdown">
          <ul class="list">
            <li>
              <button>Btn1</button>
            </li>
            <li>
              <button>Btn2</button>
            </li>
            <li>
              <button>Btn3</button>
            </li>
            <li>
              <button>Btn4</button>
            </li>
          </ul>
        </div>
      </div>
    </td>
    <td>Lorem Ipsum</td>
    <td>Lorem Ipsum</td>
    <td>Lorem Ipsum</td>
  </tr>
  <tr>
    <td>
      <div class="mobile-nav" style="border:0px solid red">
        <div class="menu-btn" id="menu-btn">
          <div></div>
          <span></span>
          <span></span>
          <span></span>
        </div>

        <div class="dropdown">
          <ul class="list">
            <li>
              <button>Btn1</button>
            </li>
            <li>
              <button>Btn2</button>
            </li>
            <li>
              <button>Btn3</button>
            </li>
            <li>
              <button>Btn4</button>
            </li>
          </ul>
        </div>
      </div>
    </td>
    <td>Lorem Ipsum</td>
    <td>Lorem Ipsum</td>
    <td>Lorem Ipsum</td>
  </tr>
  <tr>
    <td>
      <div class="mobile-nav" style="border:0px solid red">
        <div class="menu-btn" id="menu-btn">
          <div></div>
          <span></span>
          <span></span>
          <span></span>
        </div>

        <div class="dropdown">
          <ul class="list">
            <li>
              <button>Btn1</button>
            </li>
            <li>
              <button>Btn2</button>
            </li>
            <li>
              <button>Btn3</button>
            </li>
            <li>
              <button>Btn4</button>
            </li>
          </ul>
        </div>
      </div>
    </td>
    <td>Lorem Ipsum</td>
    <td>Lorem Ipsum</td>
    <td>Lorem Ipsum</td>
  </tr>
</table>

Upvotes: 1

Views: 42

Answers (2)

Mani
Mani

Reputation: 2655

Use like this

<html>
  <head>
    <style>
        .dropdown{display:none;}
        .expand{display:block;}
    </style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
	<script>
	$(document).ready(function(){
        $(".menu-btn").click(function(){
            $(this).parent().find(".dropdown").toggleClass('expand');
        });
     });
	</script>
  </head>
    <body>

	
	<table class="table table-striped" width="100%">
        <tr>
            <th>&nbsp;</th><th>Col 1</th><th>Col 2</th><th>Col 3</th>  
        </tr>
        <tr>
            <td>
                <div class="mobile-nav" style="border:0px solid red">
                    <div class="menu-btn" id="menu-btn">
                        <div>Menu1</div>
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>

                 <div class="dropdown">
                    <ul class="list">
                       <li><button>Btn1</button></li>
                       <li><button>Btn2</button></li>
                       <li><button>Btn3</button></li>
                       <li><button>Btn4</button></li>
                    </ul>
                 </div>
                </div>
            </td>
            <td>Lorem Ipsum</td>
            <td>Lorem Ipsum</td>
            <td>Lorem Ipsum</td>
        </tr>
        <tr>
            <td>
                <div class="mobile-nav" style="border:0px solid red">
                    <div class="menu-btn" id="menu-btn">
                        <div>Menu2</div>
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>

                 <div class="dropdown">
                    <ul class="list">
                       <li><button>Btn1</button></li>
                       <li><button>Btn2</button></li>
                       <li><button>Btn3</button></li>
                       <li><button>Btn4</button></li>
                    </ul>
                 </div>
                </div>
            </td>
            <td>Lorem Ipsum</td>
            <td>Lorem Ipsum</td>
            <td>Lorem Ipsum</td>
        </tr>
        <tr>
            <td>
                <div class="mobile-nav" style="border:0px solid red">
                    <div class="menu-btn" id="menu-btn">
                        <div>Menu3</div>
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>

                 <div class="dropdown">
                    <ul class="list">
                       <li><button>Btn1</button></li>
                       <li><button>Btn2</button></li>
                       <li><button>Btn3</button></li>
                       <li><button>Btn4</button></li>
                    </ul>
                 </div>
                </div>
            </td>
            <td>Lorem Ipsum</td>
            <td>Lorem Ipsum</td>
            <td>Lorem Ipsum</td>
        </tr>
      </table>
	  
    </body>
</html>

Upvotes: 1

brk
brk

Reputation: 50291

You can use siblings method to target the immediate .drop-down

$(document).ready(function(){
            $(".menu-btn").click(function(){
                $(this).siblings(".dropdown").toggleClass('expand');
            });
      });

Upvotes: 1

Related Questions