Question

我在div里面有一个div ..更像是一个下拉菜单。我的问题是当我点击#two div时。我想消失。

所以我使用了jquery。我使用了.hide()或.slideUp()。

但是当使用其中任何一个然后我尝试将鼠标悬停在#one上时，＃two再也不会出现了？

我检查了原因。我发现jquery add div属性为style="display:none"。并且css不会覆盖它。

如果我将{css：}添加到display: block !important;。单击时，jquery不会隐藏#two。

这是什么中间立场。如果我重新触发隐藏#two的类，它将无效。因为鼠标仍然在#one上方。

<div id="one">
    <span>Main</span>
    <div id="two">Sub</div>
</div>

css将是：

#one{
    position: relative;
}

#two {
    display: none;
    position: absolute;
    width: 100%;
    top: 100%;
    left: 0;
}

#one:hover #two {
    display: block;
}

Answer 1

我认为你严重关联你的js动作。另外，最佳做法是不要将.show()和.hide()与css中的显示混合使用。选择你的解决方案（js vs css）并坚持下去。

删除你的：

#one:hover #two {
    display: block;
}

这是所需的js：

$('#one span').click(function(){
    $('#two').show();
})

$('#two').click(function(){
    $('#two').hide();
});

这是一个工作小提琴：https://jsfiddle.net/q27tu1cg/

jquery强制样式超过css文件

1 个答案: