1

これは非常にjquery/javascript忍者の質問だと思います。

基本的に私は2つの異なるdivを持っており、最初のdivの中には他の要素があり、ツリーの最後にはulがあります。

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

liを順序付けられていないリストに残した場合、2番目のdiv（div.to_show）は、その「li」から直接入った場合にのみ開いたままになります。

これはクラシックメニュー用ですが、何らかの理由でhtmlを書き直して、すべてのli内に2番目のdivを含めて、子として表示することができません。

EventObject e次のプロパティから読み取ってみました。

  • e.toElement：Firefoxはそれを設定しません
  • e.relatedTarget：通常は親であり、2番目のdivではありません

その振る舞いを得るために私は何をしなければなりませんか？私が持っているまでイベントをバブルしますe.relatedTarget == second divか？

編集：DOM階層を変更できないと仮定してください。そのせいで大変です。

明らかに、特定のliでmouseenterを使用すると、div.to_showの内容が変更されます。

4

2 に答える 2

2

これがあなたが望む例です..それはあなたがメニューから完全にマウスを外した場合にのみメニューの内容を非表示にします。つまり、メニュー項目の選択にマウスを合わせてから、メニューコンテンツのdivにマウスを合わせると、メニューコンテンツのdivが表示され、消えるだけではありません。これは、非表示にして表示するコンテンツとメニューliアイテム自体を1つのコンテナー内に配置し、mouseoutハンドラーを配置してそのコンテナー上でのみすべてを非表示にすることで実現されます。そのため、メニュー項目liにはマウスアウトハンドラーがなくなり、全体的なdiv + liのコンテナーのみが含まれます（個々のli項目にマウスアウトハンドラーがあった場合、コンテンツが常に消えてしまう場所に望まない動作が発生したのはそのためです）。

また、マウスを重ねると必要なメニュー項目が表示され、別のliにマウスを合わせると、他のすべての項目が非表示になりますが、必要なものを表示するとスムーズに表示されます。これは、アイテム間をマウスで移動したときにすべてのアイテムを非表示にすることで実現されます（「elem」など、特定のクラスですべてのコンテンツdivを呼び出すことにより）。そしてそれらすべてを非表示にしますが、メニュー項目名の内容と表示する要素のクラス名の間の接続を使用して、現在選択されている項目を表示します。たとえば、クラス「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 に答える