时间戳

首页 > 解决方案 > 显示和隐藏只显示第一个下拉菜单

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

问题描述

<!-- 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();
} );

我有这段代码，当我点击它们时，下拉菜单会显示，但无论我点击哪一行，都只会显示第一行。请注意，有多行我该如何解决这个问题？

标签： javascriptjquerydatatables

解决方案

在 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>

推荐阅读