0

私は現在、ドロップスタイルのナビゲーション構造を構築して機能させています。次の要素を追加して、ナビゲーションを拡張しようとしています。

現在機能しているもの：1。「li」リンクにカーソルを合わせると、リストに隣接するdivコンテナにリンクに関連するコンテンツが表示されます。2.「li」と子「divの背景色がコンテナの幅に変わります。3。リンク/div領域にカーソルを合わせると、コンテナ「.servBox」が表示されます。

問題：「servBox」を非表示にせずにホバーできるようにしたい。

これが私が現在持っているものです。

http://jsfiddle.net/Robbo/mTNJf/

jQuery(".flyout").on('hover', function(){
var num = $(this).data('contentid');
jQuery('#serv-hover-' + num).toggle();
});

.megamenu .col_2,
.megamenu .col_3 {
float: left;
display:inline;
position: relative;
margin-left: 15px;
margin-right: 15px;
}
.megamenu .col_2 {width:149px}
.megamenu .col_3 {width:210px;}
.mm-level-1 ul {}
li.flyout { margin:0; padding: 0;display:block}
li.flyout > div:hover {background-color: #ff0000;margin-right:-100px;padding-right:50px;}

.servBox {
display: none;
top: -1px;
background: #ff0000;
min-height: 230px;
width: 230px;
}

<div class="megamenu">
<div class="col_2">
    <ul class="mm-level-1">
        <li class="flyout" data-contentid="as-1"><div><a href="#">Link 1</a></div></li>
        <li class="flyout" data-contentid="as-2"><div><a href="#">Link 2</a></div></li>
    </ul>
</div>
<div class="col_3">
    <div id="serv-hover-as-1" class="servBox" style="display:none;">Content 1</div>
    <div id="serv-hover-as-2" class="servBox" style="display:none;">Content 2</div>
</div>

前もって感謝します。

4

2 に答える 2

0

次のコードを使用します。

    jQuery(".flyout").on('hover', function(){
var num = $(this).data('contentid');
jQuery(".servBox").hide();
jQuery('#serv-hover-' + num).show();

}）;

これは簡単な修正です。より良いアプローチもあるかもしれません。

于 2013-02-06T21:56:29.230 に答える
0

このようなものはどうですか

jQuery

$(".flyout").hover(
                function(){
                    var num = $(this).data('contentid');
                    $('#serv-hover-' + num).show();
                    $(this).addClass("active");
                },
                 function(){
                     /*on moiuseleave, do nothing*/
                 });
$(".servBox").hover(
                function(){
                     /*on moiuseenter, do nothing*/
                },
                 function(){
                    $(this).hide();
                     $(".flyout").removeClass("active");
                 });

追加のCSS

li.active,
li.flyout > div:hover {
   background-color: #ff0000;
   margin-right:-100px;
   padding-right:50px;
}

http://jsfiddle.net/daCrosby/rn6e5/

編集

たとえば、ホバー関数でアクティブ状態を設定する前に、servBoxを非アクティブにしていつでも呼び出す関数を作成できます。

function hideServBox(){
    $(".servBox").hide();
    $(".flyout").removeClass("active");
}

http://jsfiddle.net/daCrosby/rn6e5/1/

さらに、

マウスがナビゲーションバー領域から離れたときにもボックスが消えるようにするには、ホバーの2番目の関数で関数を実行するhideServBox.megamenuだけです。または、次のように組み合わせます。

$(".servBox, .megamenu").mouseleave(
                function(){
                     hideServBox();
                 });

http://jsfiddle.net/daCrosby/rn6e5/3/

于 2013-02-06T22:53:37.270 に答える