添加单击以打开每个锚标记的菜单
[英]adding click to open a menu for each anchor tag
问题描述
我想知道以前是否有人这样做过。 我试图让每个.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>
2 个解决方案
解决方案1
0 2018-06-28 00:12:53
您不能使用closest选择器，因为这2个元素位于DOM的不同级别中。 您必须上升一个级别，然后可以像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
一种解决方案是将唯一的数据属性值添加到锚及其对应的弹出窗口。 当用户单击锚点时，获取其数据属性值并将其用于定位相应的弹出窗口。 请参见下面的代码段。
$(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>
每个锚标记如何不使用获得角4/5分量的锚标记点击事件NG点击
[英]How to get anchor tag click event in angular 4/5 component without using ng-click on each anchor tag
将嵌套的锚标记添加到section元素后，在click事件上触发
[英]On click event backfiring after adding nested anchor tag to section element
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.