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>

显示和隐藏仅显示第一个下拉列表

1 个答案: