0

Jquery メニューに問題があります。(1) 表示と (2) スライドダウンの両方を同時に行うことができないようです。どちらか一方だけです。

メインメニューとサブメニュー (スライドダウンする必要があるもの) を作成するためにフレックスボックスを使用していますが、これが問題の原因である可能性があります。これが私がこれまでに持っているJqueryです：

$(document).ready(function () {
    $('#mainbutton').click(

    function () {
        $('.menu').css('display', '-webkit-flex');
        $('.menu').slideDown(100);
    },

    function () {
        $('.menu').slideUp(100);
    }

    );
});

問題なく表示を none から -webkit-flex に変更することができました。スライドダウンすることはありません。関連する css/html の残りの部分は次のとおりです: http://jsfiddle.net/p4Cgu/10/

何か案は？私はJqueryにかなり慣れていないので、おそらく初心者の間違いです..

ご協力いただきありがとうございます。:-)

編集：メインボタンがそこにあるようにjsfiddleを修正しました

edit2: なんとか下にスライドさせることができました。今は、メニュー項目にマウスオーバーしたときに開いたままにするだけです

4

1 に答える 1

1

2 つのコールバック関数は同じイベントでは機能しないと思います。

2 番目の関数のみが実行されます。

あなたが最初にしたい方のslideUpまたはslideDownのコールバック関数を入れてください。以下は、変更されたコードです。

$(document).ready(function () {
    $('#mainbutton').click(

    function () {
        $('.menu').css('display', '-webkit-flex');
        $('.menu').slideUp(1000,function () {
        $('.menu').slideDown(1000);
    });
    });
});

サンプル例

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function () {
    $('.btn1').click(

    function () {
        $('p').css('display', '-webkit-flex');
        $('p').slideUp(1000,function () {
        $('p').slideDown(1000);
    });
    });
});
</script>
</head>
<body>

<p>This is a paragraph.</p>
<button class="btn1">Slide up</button>
<button class="btn2">Slide down</button>

</body>
</html>

このコードを入れて

$('.menu').on('mouseover'function(){
$('.menu').show();
})
$('.menu').on('mouseout'function(){
$('.menu').hide;
})
于 2013-08-23T06:38:05.977 に答える