时间戳

首页 > 解决方案 > 添加单击以打开每个锚标记的菜单

javascript - 添加单击以打开每个锚标记的菜单

问题描述

我想知道以前是否有人这样做过。我试图让每个 .elpsBtn 发生点击事件，并只显示该点击的 .IntOptions 菜单。页面上有多个 .elipsBtn 类。有没有办法只为单击的锚标签切换 .IntOption ？

$(document).ready(function() {

  $('a, .elipsBtn').click(function(e) {
    e.preventDefault();
    $(this).closest("ul").find(".IntOptions").toggle();
  });

  $(".lockTxt").click(function() {
    $(this).css("line-height", "35px").text(function(i, v) {
      return v === "Unlock Parameter" ? "Lock Parameter" : "Unlock Parameter"
    });
    $(".IntOptions").hide();
  });
});
body {
  padding: 60px;
}

.IntOptions {
  padding: 4px 15px 4px 15px;
  float: left;
  position: absolute;
  font-family: Helvetica, Arial, "sans-serif";
  font-size: 15px;
  font-weight: 200!important;
  text-decoration: none;
  list-style-type: none;
  display: none;
  margin-top: -30px;
  margin-left: 30px;
  box-shadow: 0 0 5px #909090;
  border-radius: 3px;
  text-align: center;
  background: #fff;
}

.IntOptions li {
  padding: 8px 0 8px 0
}

.IntOptions a:link {
  color: #282828;
  text-decoration: none
}

.IntOptions a:visited {
  color: #282828;
  text-decoration: none
}

.IntOptions a:hover {
  color: #0B7BBE;
  text-decoration: none
}

.elipsBtn {
  color: #0B7BBE;
  width: 20px;
  font-size: 22px;
  background-color: #f6f6f6;
  padding: 8px 10px 6px 10px;
  border-radius: 30px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<a href="#">
  <div class="elipsBtn"><i class="fas fa-ellipsis-h"></i></div>
</a>
<ul class="IntOptions">
  <a href="#">
    <li>Add Integration</li>
  </a>
  <a href="#">
    <li>Delete Integration</li>
  </a>
  <a href="#" class="lockTxt">
    <li>Unlock Parameters</li>
  </a>
</ul>
<br>
<a href="#">
  <div class="elipsBtn"><i class="fas fa-ellipsis-h"></i></div>
</a>
<ul class="IntOptions">
  <a href="#">
    <li>Add Integration</li>
  </a>
  <a href="#">
    <li>Delete Integration</li>
  </a>
  <a href="#" class="lockTxt">
    <li>Unlock Parameters</li>
  </a>
</ul>
</body>

标签： javascriptjquery

解决方案

一种解决方案是将唯一的数据属性值添加到锚点及其相应的弹出窗口。当用户单击锚点时，获取其数据属性值并使用它来定位相应的弹出窗口。请参阅下面的片段。

$(document).ready(function() {

  $('.elipsBtn-anchor').click(function(e) {
    e.preventDefault();
    // Hide any opened popups
    $('.IntOptions').hide();
    // Get the data-target value from the anchor
    let thisTarget = $(this).attr('data-target');
    // Target the corresponding popup using the data-target value from the anchor
    $('.IntOptions[data-target=' + thisTarget + ']').toggle();
  });

  $(".lockTxt").click(function() {
    $(this).css("line-height", "35px").text(function(i, v) {
      return v === "Unlock Parameter" ? "Lock Parameter" : "Unlock Parameter"
    });
    $(".IntOptions").hide();
  });
});
body {
  padding: 60px;
}

.IntOptions {
  padding: 4px 15px 4px 15px;
  float: left;
  position: absolute;
  font-family: Helvetica, Arial, "sans-serif";
  font-size: 15px;
  font-weight: 200!important;
  text-decoration: none;
  list-style-type: none;
  display: none;
  margin-top: -30px;
  margin-left: 30px;
  box-shadow: 0 0 5px #909090;
  border-radius: 3px;
  text-align: center;
  background: #fff;
}

.IntOptions li {
  padding: 8px 0 8px 0
}

.IntOptions a:link {
  color: #282828;
  text-decoration: none
}

.IntOptions a:visited {
  color: #282828;
  text-decoration: none
}

.IntOptions a:hover {
  color: #0B7BBE;
  text-decoration: none
}

.elipsBtn {
  color: #0B7BBE;
  width: 20px;
  font-size: 22px;
  background-color: #f6f6f6;
  padding: 8px 10px 6px 10px;
  border-radius: 30px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Add data-target attribute with a unique value to the anchor -->
<a href="#" class="elipsBtn-anchor" data-target="anchor1">
  <div class="elipsBtn"><i class="fas fa-ellipsis-h"></i></div>
</a>

<!-- Add a corresponding data-target attribute to the target element -->
<ul class="IntOptions" data-target="anchor1">
  <a href="#">
    <li>Add Integration</li>
  </a>
  <a href="#">
    <li>Delete Integration</li>
  </a>
  <a href="#" class="lockTxt">
    <li>Unlock Parameters</li>
  </a>
</ul>

<br>

<!-- Add data-target attribute with a unique value to the anchor -->
<a href="#" class="elipsBtn-anchor" data-target="anchor2">
  <div class="elipsBtn"><i class="fas fa-ellipsis-h"></i></div>
</a>

<!-- Add a corresponding data-target attribute to the target element -->
<ul class="IntOptions" data-target="anchor2">
  <a href="#">
    <li>Add Integration</li>
  </a>
  <a href="#">
    <li>Delete Integration</li>
  </a>
  <a href="#" class="lockTxt">
    <li>Unlock Parameters</li>
  </a>
</ul>

推荐阅读