添加单击以打开每个锚标记的菜单
[英]adding click to open a menu for each anchor tag
问题描述
I was wondering if someone had done this before. 
我想知道以前是否有人这样做过。 I am trying to get the click event to happen for each .elipsBtn and just show .IntOptions menu for that click. 我试图让每个.elipsBtn都发生点击事件，并且只显示该点击的.IntOptions菜单。 There are multiple .elipsBtn classes on the page. 页面上有多个.elipsBtn类。 Is there a way to toggle .IntOption for only the clicked anchor tag? 有没有一种方法可以仅对单击的锚标记切换.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>
2 个解决方案
解决方案1
0 2018-06-28 00:12:53
You cannot use the closest selector because the 2 elements are in different levels of the DOM. 您不能使用closest选择器，因为这2个元素位于DOM的不同级别中。 You have to go up one level, and then you can use next like this: 您必须上升一个级别，然后可以像next这样使用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>
解决方案2
0 2018-06-28 22:11:02
One solution is to add unique data attribute values to the anchor and their corresponding popup. 一种解决方案是将唯一的数据属性值添加到锚及其对应的弹出窗口。 When a user clicks on an anchor, get its data attribute value and use that to target the corresponding popup. 当用户单击锚点时，获取其数据属性值并将其用于定位相应的弹出窗口。 See the snippet below. 请参见下面的代码段。
$(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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
使用Javascript刷新每次点击的锚标签 - Refresh Anchor Tag on Each Click with Javascript
单击锚标记使用JS添加类 - Adding class using JS on a click of an anchor tag
锚标记：单击时打开div并单击更改bg颜色 - Anchor tag : Open div on click and change bg color on click
每个锚标记如何不使用获得角4/5分量的锚标记点击事件NG点击 - How to get anchor tag click event in angular 4/5 component without using ng-click on each anchor tag
单击锚标记后，汉堡菜单不会关闭 - Hamburger menu doesn't close after click on anchor tag
将嵌套的锚标记添加到section元素后，在click事件上触发 - On click event backfiring after adding nested anchor tag to section element
单击锚标记不起作用 - Click on Anchor tag is not working
单击带有文本的锚标记 - Click anchor tag with text
锚定标签无法点击 - Anchor tag disabled for click
锚标签jQuery点击 - Anchor tag jQuery Click
相关标签