锚标签在列表项中不起作用
[英]Anchor tag not working inside List Item
问题描述
https://jsfiddle.net/1exbczjy/ 
https://jsfiddle.net/1exbczjy/
<body>
<section class="main">
<form class="search" action="">
<input type="search" id ="searchit" placeholder="search.." />
<ul class="results" id="searchlist">
</ul>
</form>
</section>
</body>
This is a demo of the code that I am trying to run , my original code contains js file which is dynamically populating my ul class using the innerHTML function but the output is same as the dummy list data I have provided.这是我尝试运行的代码的演示，我的原始代码包含 js 文件，该文件使用 innerHTML 函数动态填充我的 ul 类，但输出与我提供的虚拟列表数据相同。
I am not able to understand why my list tag does not work .我不明白为什么我的列表标签不起作用。 I have tried to resolve it using other answers provided on this site , checking for z index and absolute and relative position of a and li tag.我尝试使用本网站上提供的其他答案来解决它，检查 z 索引以及 a 和 li 标签的绝对和相对位置。
3 个解决方案
解决方案1
3 2017-06-27 06:47:43
The root cause is: when anchor tag is clicked, .search input lose its :focus status, which makes .search input:focus + .results { display: block } disabled and .search .results 's display as none again -- As the <a> tag does not exist on page anymore, nothing happens.根本原因是：当锚标签被点击时， .search input失去了它的:focus状态，这使得.search input:focus + .results { display: block }禁用并且.search .results再次display为none -- As <a>标签不再存在于页面上，什么也没有发生。 It has nothing to do with ul or li .它与ul或li无关。
Here is a simplified example: https://jsfiddle.net/cshao/rtonLr4z/ , the <a> won't work as in the question.这是一个简化的示例： https://jsfiddle.net/cshao/rtonLr4z/ ， <a>不会像问题中那样工作。
解决方案2
3 已采纳 2017-06-27 07:02:49
The reason is because on click , the input loses its :focus (as pointed out by shaochuancs ) and the content is hidden before the click on the anchor is registered.原因是因为click ， input失去了它的:focus （正如shaochuancs指出的那样）并且在注册点击锚点之前内容被隐藏。 A click event consists of mousedown and mouseup event. click事件由mousedown和mouseup事件组成。 The loss of focus is triggered on mousedown anywhere on the page.失去焦点是在页面上任何地方的mousedown触发的。 So just prevent the loss of :focus on mousedown on the anchor tags.所以只要防止:focus on mousedown在锚标签上丢失就行了。 The rest of the code would function as expected, because the anchor tag click is triggered on mouseup .其余代码将按预期运行，因为锚标记单击是在mouseup上触发的。
So the issue can be dealt with some basic javascript/jQuery, by simply preventDefault() on mousedown on the anchor tags.所以这个问题可以通过一些基本的 javascript/jQuery 来处理，只需在锚标签上的mousedown上使用preventDefault()即可。
$("a").mousedown(function(ev) {
ev.preventDefault();
}
Note that in this code snippet the link doesn't load because it is blocked by the frame.请注意，在此代码片段中，链接不会加载，因为它被框架阻止了。 But you can see in the console that the link is clicked.但是你可以在控制台看到链接被点击了。
$("a").mousedown(function(ev) { ev.preventDefault(); console.log($(this).attr("href")); console.log("Click triggered"); });
/* * Copyright (c) 2012 Thibaut Courouble * Licensed under the MIT License ================================================== */ body { background: #f7f7f7; color: #404040; font-family: 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 13px; font-weight: normal; line-height: 20px; } a { color: #1e7ad3; text-decoration: none; } a:hover { text-decoration: underline } .container, .main { width: 640px; margin-left: auto; margin-right: auto; height: 300px; } .main { margin-top: 50px } input { font-family: 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 13px; color: #555860; } .search { position: relative; margin: 0 auto; width: 300px; } .search input { height: 26px; width: 100%; padding: 0 12px 0 25px; border-width: 1px; border-style: solid; border-color: #a8acbc #babdcc #c0c3d2; border-radius: 13px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; -webkit-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc; -moz-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc; -ms-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc; -o-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc; box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc; } .search input:focus { outline: none; border-color: #66b1ee; -webkit-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9); -moz-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9); -ms-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9); -o-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9); box-shadow: 0 0 2px rgba(85, 168, 236, 0.9); } .search input:focus+.results { display: block } .search .results { display: none; position: absolute; top: 35px; left: 0; right: 0; z-index: 10000; padding: 0; margin: 0; border-width: 1px; border-style: solid; border-color: #cbcfe2 #c8cee7 #c4c7d7; border-radius: 3px; background-color: #fdfdfd; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fdfdfd), color-stop(100%, #eceef4)); background-image: -webkit-linear-gradient(top, #fdfdfd, #eceef4); background-image: -moz-linear-gradient(top, #fdfdfd, #eceef4); background-image: -ms-linear-gradient(top, #fdfdfd, #eceef4); background-image: -o-linear-gradient(top, #fdfdfd, #eceef4); background-image: linear-gradient(top, #fdfdfd, #eceef4); -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); -ms-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); -o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); } .search .results li { display: block } .search .results li:first-child { margin-top: -1px } .search .results li:first-child:before, .search .results li:first-child:after { display: block; content: ''; width: 0; height: 0; position: absolute; left: 50%; margin-left: -5px; border: 5px outset transparent; } .search .results li:first-child:before { border-bottom: 5px solid #c4c7d7; top: -11px; } .search .results li:first-child:after { border-bottom: 5px solid #fdfdfd; top: -10px; } .search .results li:first-child:hover:before, .search .results li:first-child:hover:after { display: none } .search .results li:last-child { margin-bottom: -1px } .search .results li a { display: block; position: relative; margin: 0 -1px; padding: 6px 40px 6px 10px; color: #808394; font-weight: 500; text-shadow: 0 1px #fff; border: 1px solid transparent; border-radius: 3px; } .search .results li a span { font-weight: 200 } .search .results li a:before { content: ''; width: 18px; height: 18px; position: absolute; top: 50%; right: 10px; margin-top: -9px; } .search .results li a:hover { text-decoration: none; color: #fff; text-shadow: 0 -1px rgba(0, 0, 0, 0.3); border-color: #2380dd #2179d5 #1a60aa; background-color: #338cdf; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #59aaf4), color-stop(100%, #338cdf)); background-image: -webkit-linear-gradient(top, #59aaf4, #338cdf); background-image: -moz-linear-gradient(top, #59aaf4, #338cdf); background-image: -ms-linear-gradient(top, #59aaf4, #338cdf); background-image: -o-linear-gradient(top, #59aaf4, #338cdf); background-image: linear-gradient(top, #59aaf4, #338cdf); -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08); -moz-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08); -ms-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08); -o-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08); box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08); } :-moz-placeholder { color: #a7aabc; font-weight: 200; } ::-webkit-input-placeholder { color: #a7aabc; font-weight: 200; } .search li { padding: 0px; } .search li a { margin: 0px; display: block; width: 100%; height: 100%; } .lt-ie9 .search input { line-height: 26px } /*adding effect when the mouse is hovered over list item*/ /*adding effect when the mouse is hovered over list item*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <title>Input Autocomplete Suggestions Demo</title> <link rel="shortcut icon" href="http://designshack.net/favicon.ico"> <link rel="icon" href="http://designshack.net/favicon.ico"> <body> <section class="main"> <form class="search" action=""> <input type="search" id="searchit" placeholder="search.." /> <ul class="results" id="searchlist"> <li><a href="https://www.google.com">Tag A</a></li> <li><a href="https://www.facebook.com">Tag B</a></li> </ul> </form> </section> </body>
解决方案3
0 2020-04-02 12:57:43
There is also another possibility.还有另一种可能。 If you set the decoration of the Anchor to none and change the background of the li on hovering the Achor link only works when you are hovering on the text of the Anchor but what you want is that the Anchor activates on the whole surface of the li, but how you can make that work is another thing.如果您将 Anchor 的装饰设置为 none 并在悬停时更改 li 背景，但如何使这项工作发挥作用是另一回事。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.