javascript - 显示和隐藏仅显示第一个下拉菜单

Question

<!-- this is all in a table-->  
<tr> <!-- is bing repeated via loop in php -->
  <td>
    <ul class="icons-list">

     <li class="dropdown">
       <a href="#" class="here">Click me</a>

         <ul id=this" class="dropdown-menu dropdown-menu-right">
          <li><input type="submit" value="Edit"</li>
        </ul>
       </li>

    </ul>
  </td>
</tr>

$('#table tbody').on('click', 'tr','.here', function () {
  $('#this').toggle();
} );

我有这段代码，当我单击它们时，下拉列表确实显示，但仅显示第一行，无论我单击哪一行。请注意，有多行我该如何解决这个问题？

Answer 1

在 jQuery 中 on() ，第二个参数是选择器。但是您将其传递给第二个和第三个参数。使用 this 关键字引用当前元素。

尝试以下方法:

$('#table tbody').on('click', 'tr .here', function(){
  $(this).next('ul.dropdown-menu').toggle();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table">
  <tbody>
    <tr> <!-- is bing repeated via loop in php -->
     <td>
      <ul class="icons-list">

         <li class="dropdown">
           <a href="#" class="here">Click me</a>

             <ul id="ddl1" class="dropdown-menu dropdown-menu-right">
              <li><input type="submit" value="Edit"/></li>
            </ul>
           </li>

        </ul>
     </td>
    </tr>
    <tr> <!-- is bing repeated via loop in php -->
     <td>
      <ul class="icons-list">

         <li class="dropdown">
           <a href="#" class="here">Click me</a>

             <ul id="ddl2" class="dropdown-menu dropdown-menu-right">
              <li><input type="submit" value="Edit"/></li>
            </ul>
           </li>

        </ul>
     </td>
    </tr>
    <tr> <!-- is bing repeated via loop in php -->
     <td>
      <ul class="icons-list">

         <li class="dropdown">
           <a href="#" class="here">Click me</a>

             <ul id="ddl3" class="dropdown-menu dropdown-menu-right">
              <li><input type="submit" value="Edit"/></li>
            </ul>
           </li>

        </ul>
     </td>
    </tr>
  </tbody>
</table>