0

ユーザーが選択できる項目のドロップダウン メニューを作成する予測検索があります。ドロップダウンの後ろには、9999 の z-index を含むメニュー ボタンがあります。このため、メニュー ボタンはドロップダウン メニューの前に表示されます。ここでこれを修正するには、私の解決策です：

jQuery リスナーの使用: ユーザーが検索ボックスをクリックすると、ボタンの z-index が更新されます。

$( ".myIcon").css("z-index" , 1);

ユーザーが「blur」リスナーを使用して検索ボックスをクリックすると、z-index が再更新されます。

$( ".myIcon").css("z-index" , 9999);

これは機能しますが、あまりきれいには見えません。ドロップダウン メニューの生成に使用されるコードにアクセスできないため、このアイテムの z-index を更新できません。

私が知らない別の解決策はありますか？

4

3 に答える 3

0

メニューアイコンをもう少し合理的なものに変更してほしいとリクエストできますか?

それほど高くする必要はありません。次の要素の 1 つ上の値で十分です。

申し訳ありませんが、あなたが提案した方法以外にこの問題を解決する方法はありません。

于 2013-11-13T12:49:14.810 に答える
0

検索の親に同じ z-index を与える

例が含まれていないため、htmlがどのように見えるかを知るのは難しいですが. 同じレベルに表示したい場合は、ゲートから同じ z-index を与えることができます。検索部分があるブロックがナビゲーションの後ろにある場合、それらは自然に同じ z-index で互いに重なり合います。

#nav,#search{position:absolute;z-index:9999}

たとえば、html の後にあると仮定すると、#search上記のようになります。お気に入り：#nav#search#nav

<parent><nav/><search/></parent>

それがその前にあり、おそらく別の親にある場合は、次のようなものを使用できます。

#nav{z-index:9998} #search{z-index:9999}

htmlがより似ている場合は次のようになります。

<search/><parent><nav/></parent>

ただし、z-index をオン/オフする必要があり、 on でまったく修正できない#search場合は、すでに正しい方向に向かっています。

このようなものはかなり簡単です：

$('#search input').on('focusin', function(){//on focus
    $(this).siblings('.myIcon').css({zIndex: '9999'});
}).on('focusout', function(){//on un-focus
    $(this).siblings('.myIcon').css({zIndex: '1'});
});

ただし、css を制御できた場合は、.myIconwithのクラスを作成してz-index:9999、代わりに次のようなものを使用できます。

.on{z-index:9999}/*added css*/

$('#search input').on('focusin focusout', function(){//on focus change
    $(this).siblings('.myIcon').toggleClass('on');
});

フィドルを作った：http://jsfiddle.net/filever10/pxdz5/

于 2013-11-13T13:26:40.580 に答える