Question

您好我已经创建了一个幻灯片菜单，但我的菜单也有一个手风琴，它也使用JavaScript和j查询。

为了使手风琴起作用，我使用了这个＆＃34; // ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">

对于实际滑出的幻灯片菜单，我使用了＆＃34; // ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"

但我似乎无法让事情发挥作用。此时滑块从屏幕的角落而不是侧面出现。有没有办法让两者都起作用。

<script>

        /* Slide Out Menu code */

        $(function() {
            var menu = $("#menu");
            var clicked = false;
            $( "a.menu-trigger" ).click(function() {
                if(clicked){
                    menu.removeClass("menu-open");
                    $(".slide-out-menu").removeClass("slide-out-menu-clicked");
                    console.log('show');
                    clicked=false;
                }else{
                    menu.addClass("menu-open");
                    $(".slide-out-menu").addClass("slide-out-menu-clicked");
                    clicked=true;
                }
            });
        });

        jQuery(".container").append("<hr />");


        /* Accordion code */

            $(function() {
        $('#only-one [data-accordion]').accordion();

        $('#multiple [data-accordion]').accordion({
          singleOpen: false
        });

        $('#single[data-accordion]').accordion({
          transitionEasing: 'cubic-bezier(0.455, 0.030, 0.515, 0.955)',
          transitionSpeed: 200
        });
      });

       /* $('a.menu-trigger').click(function(){
            $('.slide-out-menu').animate({left: '0%'});
        });*/

    </script>

Answer 1

原因是您的上边距是百分比，将其更改为像素，它将保持不变。随着菜单越来越窄，顶部百分比也会缩小，并使菜单项向上移动（因此向左和向上动画）

#only-one {
    margin-top: 150px;
}

滑出菜单不会滑出

1 个答案: