Question

我认为这是非常jquery / javascript忍者问题。

基本上我有两个不同的div，在第一个内部我有其他元素，在树的末尾我有一个ul。

示例http：http://jsfiddle.net/thTpB/23/

我希望当我把li放在无序列表中时，第二个div（div.to_show）只有在我直接从那个“li”进入时才会保持打开状态。

这是一个经典菜单，但由于某种原因，我不能重写html并在每个li中包含第二个div并将其显示为一个孩子。

我尝试从EventObject e读取以下属性：

e.toElement：firefox没有设置它
e.relatedTarget：它通常是父，而不是第二个div

我必须做些什么来获得这种行为？在我有e.relatedTarget == second div之前给这个事件冒泡？

编辑：请假设我无法更改DOM层次结构。因为这很难。

显然，使用mouseenter对某个li我会改变div.to_show的内容。

Answer 1

以下是您想要的示例..如果您完全将鼠标移出菜单，它将仅隐藏菜单内容。这意味着如果你鼠标进入菜单项选择，然后鼠标进入菜单内容div，它仍然会显示菜单内容div，而不仅仅是消失。这是通过将要隐藏的内容和显示AND菜单li项本身放在一个容器中来实现的，并放置一个mouseout处理程序来隐藏该容器上的所有内容。所以菜单项li不再有任何mouseout处理程序，只有整个div + li的容器（当你在个别li项目上有一个mouseout处理程序时，这就是为什么你得到了你不想要的内容一直消失的行为）。

此外，当你将鼠标移到它上面时它会显示你想要的菜单项，然后如果你鼠标移动到另一个li，当你从一个鼠标移动到另一个时它会隐藏所有其他项目但是看起来你想要的它看起来很平滑。这是通过在项目之间鼠标时隐藏所有项目来实现的（通过调用具有某个类的所有内容div，例如“elem”）。并隐藏所有这些，但然后通过使用菜单项名称的内容和要显示的元素的类名之间的连接来显示当前所选项目。例如，类“elem foo”的菜单内容div项表示当我将鼠标悬停在html内容为“foo”的li项目时，类“.elem”的所有div菜单内容都被隐藏，但div菜单内容为显示“foo”类。

希望这有帮助！

WORKING JSFIDDLE DEMO HERE

JS

    $("div.another_container li").mouseenter(function(){ 
       $(".elem").hide();
       $("." + $(this).children("a").eq(0).html()).show();
    });

    $(".elem").hide();

    $(".wrapper").mouseleave(function(){
        $(".elem").hide();
    });

HTML

<div class="container head">
some header
</div>
<div class="wrapper">
    <div class="container">
        <div class="sixteen columns">
            <div class="another_container">
                <ul class="menu">
                    <li><a href="#">foo</a></li>
                    <li><a href="#">bar</a></li>
                </ul>

            </div>
        </div>
    </div>
     <div class="elem bar">
        BAR blabla
    </div>
      <div class="elem foo">
    FOO blabla
    </div>

</div>
<div class="container footer">
 some footer
</div>

CSS

.container .sixteen.columns{
    width: 940px;
}


.container .column, .container .columns {
    float: left;
    display: inline;
    margin-left: 10px;
    margin-right: 10px;
}


.another_container ul {
height: 25px;
width: 100%;
margin: 0;
position: relative;
padding-top: 0px;
padding-left: 0;
padding-right: 0;
padding-bottom: 4px;
}
ol, ul {
list-style: none;
}

.another_container li:first-child {
margin-left: 0px !important;
}
.another_container li {
position: relative;
text-align: left !important;
float: left;
width: auto;
margin-left: 27px;
}

.elem {
display: none;
position: relative;
width: 100%;
height: 200px;
text-align: center;
float: left;
padding-bottom: 20px;
padding-left: auto;
padding-right: auto;
background-color: #f2f2f2;
border-style: solid;
border-color: red;
border-bottom-width: 2px;
}

Answer 2

为什么不这样做？

http://jsfiddle.net/thTpB/15/

将您想要显示的div放在li元素中......这样您就不必离开选择器上下文以获得流动的东西：）

P.S。：不要试图让事情变得复杂，特别是当它们可以用更容易和更好的方式完成时：）

更新：在此处发布解决方案......

html部分

<div class="container">
    <div class="sixteen columns">
        <div class="another_container">
            <ul class="menu">
                <li>
                    <a href="#">foo</a>
                    <div class="to_show">blabla</div>
                </li>
                <li>
                    <a href="#">bar</a>
                    <div class="to_show">blabla</div>
                </li>
            </ul>
    </div>
</div>

javascript部分......

$("div.another_container li").mouseenter(function(){ 
    $(this).find("div.to_show").show();
});  

$("div.another_container li").mouseleave(function(event){ 
        $(this).find("div.to_show").hide();
});

Jquery mouseleave事件：如何知道鼠标的元素是什么？

2 个答案: