Question

我有以下html文件：

<!DOCTYPE html>
<html>
<head>
<link href="example.css" rel="stylesheet">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>

<form class="search">
    <div class="search_box">
         <input type="text" name="q" id="search_text" placeholder="Search..." />
             <ul id="search_results" class="results" >
                 <li><a href="">Search Result #1<br /><span>Description...</span></a></li>
                 <li><a href="">Search Result #2<br /><span>Description...</span></a></li>
             </ul>
    </div>
</form>
   <script type="text/javascript">
        $(document).on('click', '#search_results li',function(i) {
              i.preventDefault();
              console.log('clicked');
          });
    </script>

</body>
</html>

并且css看起来像这样：

.search .search_box input:focus +  .results { visibility: visible }

.search .search_box .results {
    visibility:hidden;
}

如果未包含css，则文档按预期工作，并在单击其中一个锚标记时打印“单击”，但在包含css时不打印。

所以我怀疑在javascript执行之前该项是隐藏的。我真的很喜欢css解决方案而不是隐藏和切换javascript语句。

有没有办法解决这个问题？

Answer 1

将click()更改为mousedown()。 click事件包括一个鼠标注册，到那时焦点已经丢失。

$(document).on('mousedown', '#search_results li', function (i) {
    i.preventDefault();
    console.log('clicked');
});

<强> jsFiddle example

Answer 2

分别尝试使用opacity:0和opacity:1代替visibility:hidden和visibility:visible。

这是因为点击时的事件顺序是：

模糊上一个元素 - 这会导致:hover不再适用
点击新元素......但它现在已隐藏！

Answer 3

添加悬停状态以使项目可见。

.search .search_box input +  .results:hover,
.search .search_box input:focus +  .results { visibility: visible }

.search .search_box .results {
    visibility:hidden;
}

为挫折者提供工作小提琴：http://jsfiddle.net/cEP95/

Answer 4

响应“在CSS之前执行JS”，唯一的道路是在dom准备好后加载css样式表。所以，你可以尝试类似的东西：

您所在部分的某处：

<style type="text/css">
body { display: none }
</style>

<强> JS：

 $(function() {
     $('head').append('<link type="text/css" rel="stylesheet" href="example.css" />');
 });

在css中：

body { display: block }

在CSS之前执行JS

4 个答案: