jQuery - 包含 <li> 下拉菜单的嵌套文本字段悬停的 onClick答案

【问题标题】：jQuery - onClick of nested text-field hover containing <li> dropdown menujQuery - 包含 <li> 下拉菜单的嵌套文本字段悬停的 onClick
【发布时间】：2013-11-01 12:33:17
【问题描述】：

<li> 中有 2 个用户名/密码文本字段。在<li> 的:hover 上，出现下拉菜单并显示文本字段。当用户单击文本字段时，我希望 <li> 具有伪类 :hover，因此如果将鼠标移到连续的 <li> 之外，这些字段仍然可见。

我已经尝试过这段代码，但它不起作用。

<script>$('#username').on('click',function() {
    $('#li').trigger('hover');});
</script>

这里是 HTML

<li id="li"><a href="#">Register</a></li>
   <p>Or Login Below</p>
 <form method="post" action="#" name="loginform" id="loginform" class="myClass">
<fieldset>
    <input value="username" type="text" name="username" id="username" onclick="this.value=''" class="left" />
    <input value="password" type="password" name="password" id="password" onclick="this.value=''" class="left" />
    <input type="submit" name="login" id="login2" value="Login" />
</fieldset>
</form>  
</li>

JavaScript 是错误的还是可能与其他 JavaScript 冲突？
此外，是否容易做到“点击<div> 会使:hover 消失，从而隐藏<li>？

【问题讨论】：

标签： javascript click hover html-lists textfield

【解决方案1】：

我试过这段代码，但它不起作用

不确定什么是“不起作用”，但我会以不同的方式实现该行为：

点击时触发“悬停”对我来说似乎不合适。如果“悬停状态”并不意味着鼠标悬停在某个元素上，代码将变得模糊。

代码将更具可读性/逻辑性，只需在点击事件上切换 LI 的可见性。

$('#username').on('click',function() {
    $('#li').toggle();
});

【讨论】：

“不工作”意味着它没有做我想要的；什么都没有发生
究竟是什么？
当我点击文本字段并将鼠标移开时，下拉菜单消失。
那么我会采用我建议的解决方案：不要在非悬停情况下使用悬停状态：显式隐藏/显示元素。
感谢您的回复，但这是完全错误的。这隐藏了下拉区域并使其不会回来。自己试试，做个小提琴！

【解决方案2】：

我做错了。显然 CSS 伪选择器无法按照我尝试的方式进行选择。
这是其他人的解释http://forum.jquery.com/topic/jquery-triggering-css-pseudo-selectors-like-hover

这最终奏效了：

<script>$('#username').click(function() {
$('#li').addClass('psuedoClassProperty'); // adds the CSS to display

});

点击关闭时隐藏：How do I detect a click outside an element?

<script>
$('html').click(function() {
$('#li').removeClass('psuedoClassProperty');
});
$('#li').click(function(event){
event.stopPropagation();
});
</script>

【讨论】：