0

次の簡単なスライド ダウン ホバー メニューがあります。

 $(function(){
$('.sub-menu').hide();
$('.menu-item').hover(
    function () {
        var target = $(this).children('ul');
        $.browser.msie ? target.show() : target.slideDown(150);
    },
    function () {
        var target = $(this).children('ul')
        $.browser.msie ? target.hide() : target.slideUp(150);
    }
);

});

.menu-item にカーソルを合わせると .sub-menu が下にスライドし、離すと上にスライドします。完璧です。

.menu-item にカーソルを合わせたときに .sub-menu を上にスライドさせる必要があります。その逆も同様です。

私はslideUpとslideDownを交換するという明らかなことをしましたが、うまくいかないようです。

何か案は？

できればどうもありがとう:)

4

1 に答える 1

0 
$(function(){
    $('.menu-item').hover(
        function () {
            var target = $(this).children('ul');
            $.browser.msie ? target.hide() : target.slideUp(150);
        },
        function () {
            var target = $(this).children('ul')
            $.browser.msie ? target.show() : target.slideDown(150);
        }
    );
});

動作するはずですが、コードを追加しないとテストできません。

基本的に.sub-menuは既に表示されていると想定しているので、 にカーソルを合わせると . menu-item隠したいですよね？

私が変更したのは、2 つの関数を交換$('.sub-menu').hide();し、最初にあった を削除したことだけです。実際にスライドする前に隠す必要はありません。

編集:最新の例に取り組んでいます。

ここでチェックしてください：http://jsfiddle.net/GwBuj/3/

私がしたことは次のとおりです。

  • #buttonと#sliderをクラス (.buttonと.slider)に変更
  • それに応じて CSS を変更し、CSS を変更.sliderして複数のボタンを使用できるようにします (他のボタンが見えないように絶対に配置しました)。
  • 複数のボタンで動作するように JQuery コードを調整する
  • 機能することを示す別のボタンを追加しました
于 2010-11-09T07:33:03.780 に答える