时间戳

首页 > 解决方案 > 为什么下拉菜单在多个表中不起作用jQuery

javascript - 为什么下拉菜单在多个表中不起作用jQuery

问题描述

我使用下拉菜单。

但是这个下拉列表在多个表中不起作用，我尝试解决这个问题，但我没有找到解决方案。

代码：

$(document).ready(function () {
    document.querySelector('.custom-style').onclick = ({
        target
    }) => {
        if (!target.classList.contains('more')) return
        document.querySelectorAll('.dropout.active').forEach(
            (d) => d !== target.parentElement && d.classList.remove('active')
        )
        target.parentElement.classList.toggle('active');
    }
});

JSFiddle -链接

所以你可以在第一个表下拉列表中看到工作，但在第二个表没有，我尝试了几种方法来解决这个问题，但没有结果。

标签： javascripthtmljquery

解决方案

你需要each()方法。我重做了你的代码。

$(document).ready(function () {  
   Array.from(document.querySelectorAll('.custom-style')).forEach(function(menu_side) {
    menu_side.onclick = ({
        target
    }) => {
        if (!target.classList.contains('more')) return
        document.querySelectorAll('.dropout.active').forEach(
            (d) => d !== target.parentElement && d.classList.remove('active')
        )
        target.parentElement.classList.toggle('active');
    }
    
  });   
});
.more {
    cursor: pointer;
    border: none;
    background: transparent;
    display: block;
    margin-top: auto;
    margin-bottom: auto;
}

    .more span {
        display: block;
        width: .30rem;
        height: .30rem;
        background: #363636;
        border-radius: 50%;
        pointer-events: none;
    }

        .more span:not(:last-child) {
            margin-bottom: .125rem;
        }

.dropout {
    display: block;
    margin-top: auto;
    margin-bottom: auto;
    float: right;
}

    .dropout ul {
        position: absolute;
        top: auto;
        right: 2rem;
        transform: scaleX(0);
        transform-origin: right;
        transition: transform 0.12s ease;
        color: #fff;
        background: rgba(33, 33, 33, 0.85);
        border-radius: 10px;
        padding: 20px 20px 20px 20px;
        list-style-type: none;
    }

        .dropout input {
            background: none;
            border: none;
        }

    .dropout btns {
        background: none;
        border: none;
    }

        .dropout.active ul {
            transform: scaleX(1);
        }

.btns {
    display: inline-block;
    position: relative;
    width: 120px;
    height: 32px;
    line-height: 32px;
    border-radius: 2px;
    font-size: 0.9em;
    background-color: #fff;
    color: #646464;
    margin: 5px;
}

    .btns > paper-ripple {
        border-radius: 2px;
        overflow: hidden;
    }

    .btns.narrow {
        width: 60px;
    }

    .btns.grey {
        background-color: #eee;
    }

    .btns.blue {
        background-color: #4285f4;
        color: #fff;
    }

    .btns.green {
        background-color: #0f9d58;
        color: #fff;
    }

    .btns.red {
        background-color: #cb3a3a;
        color: #fff;
    }

    .btns.light-blue {
        background-color: lightblue;
        color: #fff;
    }

    .btns.darkcyan {
        background-color: darkcyan;
        color: #fff;
    }

    .btns.raised {
        transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        transition-delay: 0.2s;
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
    }

        .btns.raised:active {
            box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2);
            transition-delay: 0s;
        }

.centered-text {
    text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table style="width:100%" class="custom-style">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
    <td>
      <div class="dropout">
        <button class="more">
          <span></span>
          <span></span>
          <span></span>
        </button>
        <ul>
          <li>
            <a id="open-modal" class="btns raised blue centered-text"href="#open-modal">Edit</a>
          </li>
          <li>
            <button type="button" class="btns raised grey">Detailbutton
            </button>
          </li>
        </ul>
      </div>
    </td>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
    <td>
      <div class="dropout">
        <button class="more">
          <span></span>
          <span></span>
          <span></span>
        </button>
        <ul>
             <li>
            <a id="open-modal" class="btns raised blue centered-text"href="#open-modal">Edit</a>
          </li>
          <li>
            <button type="button" class="btns raised grey">Detailbutton
            </button>
          </li>
        </ul>
      </div>
    </td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
    <td>

      <div class="dropout">
        <button class="more">
          <span></span>
          <span></span>
          <span></span>
        </button>
        <ul>
            <li>
            <a id="open-modal" class="btns raised blue centered-text"href="#open-modal">Edit</a>
          </li>
          <li>
            <button type="button" class="btns raised grey">Detailbutton
            </button>
          </li>
        </ul>
      </div>
    </td>
  </tr>
</table>
<hr>
<table style="width:100%" class="custom-style">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
    <td>
      <div class="dropout">
        <button class="more">
          <span></span>
          <span></span>
          <span></span>
        </button>
        <ul>
          <li>
            <a id="open-modal" class="btns raised blue centered-text"href="#open-modal">Edit</a>
          </li>
          <li>
            <button type="button" class="btns raised grey">Detailbutton
            </button>
          </li>
        </ul>
      </div>
    </td>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
    <td>
      <div class="dropout">
        <button class="more">
          <span></span>
          <span></span>
          <span></span>
        </button>
        <ul>
             <li>
            <a id="open-modal" class="btns raised blue centered-text"href="#open-modal">Edit</a>
          </li>
          <li>
            <button type="button" class="btns raised grey">Detailbutton
            </button>
          </li>
        </ul>
      </div>
    </td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
    <td>

      <div class="dropout">
        <button class="more">
          <span></span>
          <span></span>
          <span></span>
        </button>
        <ul>
            <li>
            <a id="open-modal" class="btns raised blue centered-text"href="#open-modal">Edit</a>
          </li>
          <li>
            <button type="button" class="btns raised grey">Detailbutton
            </button>
          </li>
        </ul>
      </div>
    </td>
  </tr>
</table>

推荐阅读