1

我认为这是非常 jquery/javascript ninja 的问题。

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

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

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

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

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

  • e.toElement: 火狐没有设置
  • e.relatedTarget：通常是父级，而不是第二个 div

我必须做什么才能获得这种行为？冒泡事件直到我有e.relatedTarget == second div？

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

显然，在某个 li 上使用 mouseenter 我将更改 div.to_show 的内容。

4

2 回答 2

2

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

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

希望这可以帮助！

在这里工作 JSFIDDLE 演示

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;
}
于 2013-02-10T14:52:30.943 回答
1

为什么不这样做呢？

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

将要显示的 div 放在li元素中...这样您就不必离开选择器上下文来获得花哨的东西流动 :)

PS：不要试图让事情变得复杂，尤其是当它们可以用更简单更好的方法完成时:)

更新：在这里发布解决方案......

该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();
});
于 2013-02-10T14:51:27.653 回答