在Laravel中,基于jQuery的三点下拉不适合循环

2022-01-28 07:08:55 标签 htmljquerylaravel

我有多个Bootstrap卡显示内部for循环,我想提供3点菜单选项给用户。我的脚本是工作的,但菜单的代码是工作的只有第一张牌,而不是所有的牌。

我如何定制我的脚本,让它工作的所有卡在循环?

叶片

       @if (count($data)>0)
         @foreach ($data as $row)
    
              <div class="three-buttons">
              <div class="card-title mb-0 h5 font-weight-bold dark-color">{{$row->car_title}}</div>
                 <div>
                  <div class="more">
                   <button id="more-btn" class="more-btn">
                   <span class="more-dot"></span>
                   <span class="more-dot"></span>
                   <span class="more-dot"></span>
                  </button>
                  
                  <div class="more-menu">
                   <div class="more-menu-caret">
                   <div class="more-menu-caret-outer"></div>
                   <div class="more-menu-caret-inner"></div>
                   </div>
                  
              <ul class="more-menu-items" tabindex="-1" role="menu" aria-labelledby="more-btn" aria-hidden="true">
                <li class="more-menu-item" role="presentation">
                <button type="button" class="more-menu-btn" role="menuitem">Share</button>
                </li>
                </ul>
               </div>
               </div>
               </div> 
    
    @endforeach
@endif

Javascript

var el = document.querySelector('.more');
var my_btn = el.querySelector('.more-btn');
var menu = el.querySelector('.more-menu');
var visible = false;
function showMenu(e) {
    e.preventDefault();
    if (!visible) {
        visible = true;
        el.classList.add('show-more-menu');
        menu.setAttribute('aria-hidden', false);
        document.addEventListener('mousedown', hideMenu, false);
    }
}
function hideMenu(e) {
    if (my_btn.contains(e.target)) {
        return;
    }
    if (visible) {
        visible = false;
        el.classList.remove('show-more-menu');
        menu.setAttribute('aria-hidden', true);
        document.removeEventListener('mousedown', hideMenu);
    }
}
my_btn.addEventListener('click', showMenu, false);

CSS

    .more-menu {
        width: 100px;
    }
    /* More Button / Dropdown Menu */
    .more-btn,
    .more-menu-btn {
        background: none;
        border: 0 none;
        line-height: normal;
        overflow: visible;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        width: 100%;
        text-align: right;
        outline: none;
        cursor: pointer;
        margin-left: -20px;
    }
    .more-dot {
        background-color: #020b56;
        margin: 0 auto;
        display: inline-block;
        width: 4px;
        height: 4px;
        margin-left: 1px;
        border-radius: 50%;
        transition: background-color 0.3s;
    }
    .more-menu {
        position: absolute;
        top: 8%;
        z-index: 900;
        float: left;
        padding: 10px 0;
        margin-top: 9px;
        background-color: #fff;
        border: 1px solid #ccd8e0;
        border-radius: 4px;
        box-shadow: 1px 1px 3px rgba(0,0,0,0.25);
        opacity: 0;
        transform: translate(0, 15px) scale(.95);
        transition: transform 0.1s ease-out, opacity 0.1s ease-out;
        pointer-events: none;
    }
    .more-menu-caret {
        position: absolute;
        top: -10px;
        left: 12px;
        width: 18px;
        height: 10px;
        float: left;
        overflow: hidden;
    }
    .more-menu-caret-outer,
    .more-menu-caret-inner {
        position: absolute;
        display: inline-block;
        margin-left: -1px;
        font-size: 0;
        line-height: 1;
    }
    .more-menu-caret-outer {
        border-bottom: 10px solid #c1d0da;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        height: auto;
        left: 0;
        top: 0;
        width: auto;
    }
    .more-menu-caret-inner {
        top: 1px;
        left: 1px;
        border-left: 9px solid transparent;
        border-right: 9px solid transparent;
        border-bottom: 9px solid #fff;
    }
    .more-menu-items {
        margin: 0;
        list-style: none;
        padding: 0;
    }
    .more-menu-item {
        display: block;
    }
    .more-menu-btn {
        min-width: 100%;
        color: #66757f;
        cursor: pointer;
        display: block;
        font-size: 13px;
        line-height: 18px;
        padding: 5px 20px;
        position: relative;
        white-space: nowrap;
    }
    .more-menu-item:hover {
        background-color: #489fe5;
    }
    .more-menu-item:hover .more-menu-btn {
        color: #fff;
    }
    .more-btn:hover .more-dot,
    .show-more-menu .more-dot {
        background-color: #516471;
    }
    .show-more-menu .more-menu {
        opacity: 1;
        transform: translate(0, 0) scale(1);
        pointer-events: auto;
    }

# # #你设置<div id="three-buttons"> in each iteration re在每次迭代中,会产生许多具有相同id的div。单击只影响该div的第一个元素。

var el = document.querySelector('.more');
var my_btn = el.querySelector('.more-btn');
var menu = el.querySelector('.more-menu');
var visible = false;
function showMenu(e) {
  e.preventDefault();
  if (!visible) {
    visible = true;
    el.classList.add('show-more-menu');
    menu.setAttribute('aria-hidden', false);
    document.addEventListener('mousedown', hideMenu, false);
  }
}
function hideMenu(e) {
  if (my_btn.contains(e.target)) {
    return;
  }
  if (visible) {
    visible = false;
    el.classList.remove('show-more-menu');
    menu.setAttribute('aria-hidden', true);
    document.removeEventListener('mousedown', hideMenu);
  }
}
my_btn.addEventListener('click', showMenu, false);
.more-menu {
        width: 100px;
    }
    /* More Button / Dropdown Menu */
    .more-btn,
    .more-menu-btn {
        background: none;
        border: 0 none;
        line-height: normal;
        overflow: visible;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        width: 100%;
        text-align: right;
        outline: none;
        cursor: pointer;
        margin-left: -20px;
    }
    .more-dot {
        background-color: #020b56;
        margin: 0 auto;
        display: inline-block;
        width: 4px;
        height: 4px;
        margin-left: 1px;
        border-radius: 50%;
        transition: background-color 0.3s;
    }
    .more-menu {
        position: absolute;
        top: 8%;
        z-index: 900;
        float: left;
        padding: 10px 0;
        margin-top: 9px;
        background-color: #fff;
        border: 1px solid #ccd8e0;
        border-radius: 4px;
        box-shadow: 1px 1px 3px rgba(0,0,0,0.25);
        opacity: 0;
        transform: translate(0, 15px) scale(.95);
        transition: transform 0.1s ease-out, opacity 0.1s ease-out;
        pointer-events: none;
    }
    .more-menu-caret {
        position: absolute;
        top: -10px;
        left: 12px;
        width: 18px;
        height: 10px;
        float: left;
        overflow: hidden;
    }
    .more-menu-caret-outer,
    .more-menu-caret-inner {
        position: absolute;
        display: inline-block;
        margin-left: -1px;
        font-size: 0;
        line-height: 1;
    }
    .more-menu-caret-outer {
        border-bottom: 10px solid #c1d0da;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        height: auto;
        left: 0;
        top: 0;
        width: auto;
    }
    .more-menu-caret-inner {
        top: 1px;
        left: 1px;
        border-left: 9px solid transparent;
        border-right: 9px solid transparent;
        border-bottom: 9px solid #fff;
    }
    .more-menu-items {
        margin: 0;
        list-style: none;
        padding: 0;
    }
    .more-menu-item {
        display: block;
    }
    .more-menu-btn {
        min-width: 100%;
        color: #66757f;
        cursor: pointer;
        display: block;
        font-size: 13px;
        line-height: 18px;
        padding: 5px 20px;
        position: relative;
        white-space: nowrap;
    }
    .more-menu-item:hover {
        background-color: #489fe5;
    }
    .more-menu-item:hover .more-menu-btn {
        color: #fff;
    }
    .more-btn:hover .more-dot,
    .show-more-menu .more-dot {
        background-color: #516471;
    }
    .show-more-menu .more-menu {
        opacity: 1;
        transform: translate(0, 0) scale(1);
        pointer-events: auto;
    }
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
  <div class="three-buttons">
    <div class="card-title mb-0 h5 font-weight-bold dark-color">car title 1</div>
    <div>
      <div class="more">
        <button id="more-btn" class="more-btn">
                       <span class="more-dot"></span>
                       <span class="more-dot"></span>
                       <span class="more-dot"></span>
                      </button>
        <div class="more-menu">
          <div class="more-menu-caret">
            <div class="more-menu-caret-outer"></div>
            <div class="more-menu-caret-inner"></div>
          </div>
          <ul class="more-menu-items" tabindex="-1" role="menu" aria-labelledby="more-btn" aria-hidden="true">
            <li class="more-menu-item" role="presentation">
              <button type="button" class="more-menu-btn" role="menuitem">Share</button>
            </li>
          </ul>
        </div>
      </div>
      <div class="card-title mb-0 h5 font-weight-bold dark-color">car title 2</div>
      <div>
        <div class="more">
          <button id="more-btn" class="more-btn">
                       <span class="more-dot"></span>
                       <span class="more-dot"></span>
                       <span class="more-dot"></span>
                      </button>
          <div class="more-menu">
            <div class="more-menu-caret">
              <div class="more-menu-caret-outer"></div>
              <div class="more-menu-caret-inner"></div>
            </div>
            <ul class="more-menu-items" tabindex="-1" role="menu" aria-labelledby="more-btn" aria-hidden="true">
              <li class="more-menu-item" role="presentation">
                <button type="button" class="more-menu-btn" role="menuitem">Share</button>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>

# # #我补充道document.body.addEventListener('click' showMenu); event listener t事件监听器来监听单击的事件。在showMenu(e) function I added if(e.target && e.t我添加了功能if(e.target && e.target.nodeName == "BUTTON" && e.target.classList.contains("more-btn")) to check if the c检查被点击的事件是否是一个按钮,是否有一个类“more-btn”。但我不确定你的弹出菜单的位置(css准确),因为当你点击任何一个按钮,它出现在相同的位置

var el = document.querySelector('.more');
var my_btn = el.querySelector('.more-btn');
var menu = el.querySelector('.more-menu');
var visible = false;
function showMenu(e) {
  if(e.target && e.target.nodeName == "BUTTON" && 
   e.target.classList.contains("more-btn")) {
    if (!visible) {
    visible = true;
    el.classList.add('show-more-menu');
    menu.setAttribute('aria-hidden', false);
    document.addEventListener('mousedown', hideMenu, false);
  }
}
  
}
function hideMenu(e) {
  if (my_btn.contains(e.target)) {
    return;
  }
  if (visible) {
    visible = false;
    el.classList.remove('show-more-menu');
    menu.setAttribute('aria-hidden', true);
    document.removeEventListener('mousedown', hideMenu);
  }
}
document.body.addEventListener('click', showMenu);
.more-menu {
        width: 100px;
    }
    /* More Button / Dropdown Menu */
    .more-btn,
    .more-menu-btn {
        background: none;
        border: 0 none;
        line-height: normal;
        overflow: visible;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        width: 100%;
        text-align: right;
        outline: none;
        cursor: pointer;
        margin-left: -20px;
    }
    .more-dot {
        background-color: #020b56;
        margin: 0 auto;
        display: inline-block;
        width: 4px;
        height: 4px;
        margin-left: 1px;
        border-radius: 50%;
        transition: background-color 0.3s;
    }
    .more-menu {
        position: absolute;
        top: 8%;
        z-index: 900;
        float: left;
        padding: 10px 0;
        margin-top: 9px;
        background-color: #fff;
        border: 1px solid #ccd8e0;
        border-radius: 4px;
        box-shadow: 1px 1px 3px rgba(0,0,0,0.25);
        opacity: 0;
        transform: translate(0, 15px) scale(.95);
        transition: transform 0.1s ease-out, opacity 0.1s ease-out;
        pointer-events: none;
    }
    .more-menu-caret {
        position: absolute;
        top: -10px;
        left: 12px;
        width: 18px;
        height: 10px;
        float: left;
        overflow: hidden;
    }
    .more-menu-caret-outer,
    .more-menu-caret-inner {
        position: absolute;
        display: inline-block;
        margin-left: -1px;
        font-size: 0;
        line-height: 1;
    }
    .more-menu-caret-outer {
        border-bottom: 10px solid #c1d0da;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        height: auto;
        left: 0;
        top: 0;
        width: auto;
    }
    .more-menu-caret-inner {
        top: 1px;
        left: 1px;
        border-left: 9px solid transparent;
        border-right: 9px solid transparent;
        border-bottom: 9px solid #fff;
    }
    .more-menu-items {
        margin: 0;
        list-style: none;
        padding: 0;
    }
    .more-menu-item {
        display: block;
    }
    .more-menu-btn {
        min-width: 100%;
        color: #66757f;
        cursor: pointer;
        display: block;
        font-size: 13px;
        line-height: 18px;
        padding: 5px 20px;
        position: relative;
        white-space: nowrap;
    }
    .more-menu-item:hover {
        background-color: #489fe5;
    }
    .more-menu-item:hover .more-menu-btn {
        color: #fff;
    }
    .more-btn:hover .more-dot,
    .show-more-menu .more-dot {
        background-color: #516471;
    }
    .show-more-menu .more-menu {
        opacity: 1;
        transform: translate(0, 0) scale(1);
        pointer-events: auto;
    }
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
  <div class="three-buttons">
    <div class="card-title mb-0 h5 font-weight-bold dark-color">car title 1</div>
    <div>
      <div class="more">
        <button id="more-btn" class="more-btn">
                       <span class="more-dot"></span>
                       <span class="more-dot"></span>
                       <span class="more-dot"></span>
                      </button>
        <div class="more-menu">
          <div class="more-menu-caret">
            <div class="more-menu-caret-outer"></div>
            <div class="more-menu-caret-inner"></div>
          </div>
          <ul class="more-menu-items" tabindex="-1" role="menu" aria-labelledby="more-btn" aria-hidden="true">
            <li class="more-menu-item" role="presentation">
              <button type="button" class="more-menu-btn" role="menuitem">Share</button>
            </li>
          </ul>
        </div>
      </div>
<br /><br />
      <div class="card-title mb-0 h5 font-weight-bold dark-color">car title 2</div>
      <div>
        <div class="more">
          <button id="more-btn" class="more-btn">
                       <span class="more-dot"></span>
                       <span class="more-dot"></span>
                       <span class="more-dot"></span>
                      </button>
          <div class="more-menu">
            <div class="more-menu-caret">
              <div class="more-menu-caret-outer"></div>
              <div class="more-menu-caret-inner"></div>
            </div>
            <ul class="more-menu-items" tabindex="-1" role="menu" aria-labelledby="more-btn" aria-hidden="true">
              <li class="more-menu-item" role="presentation">
                <button type="button" class="more-menu-btn" role="menuitem">Share</button>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>

阅读全文

▼ 版权说明

相关文章也很精彩
推荐内容
更多标签
相关热门
全站排行
随便看看

错说 cuoshuo.com —— 程序员的报错记录

部分内容根据CC版权协议转载;网站内容仅供参考,生产环境使用务必查阅官方文档

辽ICP备19011660号-5

×

扫码关注公众号:职场神器
发送: 1
获取永久解锁本站全部文章的验证码