jquery事件是为所有具有相同类名而不是当前选定按钮的按钮启动的

基本上，当我点击第一个.menu-btn时，它应该只被调用第一个.dropdown 请注意，此内容是即时生成的，所以我不能用不同的ID对所有jquery事件是为所有具有相同类名而不是当前选定按钮的按钮启动的

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

来源

2016-06-11 BakerStreet221

'$（本）。接下来（”下拉菜单 “）toggleClass（ '扩大'）;'$ –

（本）.find（”。下拉列表“）。toggleCalss .... – Aftab

您可以使用siblings方法为目标的即时.drop-down

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

来源

2016-06-11 07:04:38 brk

使用这样

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

 
\t 
 
\t <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> 
 
\t 
 
    </body> 
 
</html>

来源

2016-06-11 07:15:03 Mani

jquery事件是为所有具有相同类名而不是当前选定按钮的按钮启动的

回答

相关问题