Question

我想知道以前是否有人这样做过。我试图让每个.elipsBtn都发生点击事件，并且只显示该点击的.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>

Answer 1

您不能使用closest选择器，因为这2个元素位于DOM的不同级别中。您必须上升一个级别，然后才能使用next，如下所示：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
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}
</style>
<script>
$(document).ready(function(){

        $('a, .elipsBtn').click(function(e) {
            e.preventDefault();
            $(this).parent().next("ul").toggle();
        });

        $(".lockTxt").click(function () {
            $(this).css("line-height","35px").text(function(i, v){
               return v === "Unlock Parameter" ? "Lock Parameter" : "Unlock Parameter"
            });
            $(".IntOptions").hide();
        });
});
</script>


<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>

Answer 2

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

$(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>

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

2 个答案: