JQuery 在鼠标单击时显示和隐藏 div(动画)

IT技术 javascript jquery jquery-ui jquery-effects
2021-03-07 20:15:03

这是我的 HTML 代码:

<div id="showmenu">Click Here</div>
<div class="menu" style="display: none;">
    <ul>
        <li>Button1</li>
        <li>Button2</li>
        <li>Button3</li>
    </ul>
</div>

我想.menu#showmenu从左向右滑动时显示点击(带动画)。#showmenu在网站页面或任何地方再次单击时.menu将隐藏(向左滑动)。

我使用 JQuery 2.0.3

我试过这个,但它没有做我想要的。

$(document).ready(function() {
    $('#showmenu').toggle(
        function() {
            $('.menu').slideDown("fast");
        },
        function() {
            $('.menu').slideUp("fast");
        }
    );
});
6个回答

这种.toggle()方法去除在1.9版本的jQuery从。你可以这样做:

$(document).ready(function() {
    $('#showmenu').click(function() {
            $('.menu').slideToggle("fast");
    });
});

演示:http : //jsfiddle.net/APA2S/1/

...但与您的问题中的代码一样,它会向上或向下滑动。要向左或向右滑动,您可以执行以下操作:

$(document).ready(function() {
    $('#showmenu').click(function() {
         $('.menu').toggle("slide");
    });
});

演示:http : //jsfiddle.net/APA2S/2/

请注意,这需要jQuery-UI 的幻灯片效果,但是您将该标签添加到您的问题中,所以我认为这没问题。

@balexandre - 是的,我知道,但我开始解释为什么 OP 的代码不能正常工作以及如何让它工作 - 他或她的代码中确实.slideUp().slideDown()方法。然后,我在左到右的东西编辑,你downvoted,虽然也许答案在您的浏览器没有刷新?
2021-05-06 20:15:03
@balexandre 为什么?因为 OP 用“jquery-ui”标记了他们的问题,如果他们想使用它,他们可以用一行代码来实现他们的要求。如果他们不想使用 jQuery-UI,那么 TJ 的答案是一个很好的解决方案,就像你的一样。
2021-05-09 20:15:03
是的,我只是添加了那部分。
2021-05-16 20:15:03
谢谢,但正如我在问题中所说,我想使用向左滑动。
2021-05-17 20:15:03

当然slideDownslideUp不要做你想做的,你说你希望它是左/右,而不是上/下。

如果您对问题的编辑添加jquery-ui标签意味着您正在使用 jQuery UI,我会使用nnnnnn 的解决方案,使用 jQuery UI 的slide效果。

如果不:

假设菜单一开始是可见的(编辑:oop,我认为这不是一个有效的假设;请参阅下面的注释),如果您希望它向左滑出然后从左侧滑回,您可以这样做:现场示例| 直播源

$(document).ready(function() {
    // Hide menu once we know its width
    $('#showmenu').click(function() {
        var $menu = $('.menu');
        if ($menu.is(':visible')) {
            // Slide away
            $menu.animate({left: -($menu.outerWidth() + 10)}, function() {
                $menu.hide();
            });
        }
        else {
            // Slide in
            $menu.show().animate({left: 0});
        }
    });
});

您需要放置position: relative菜单元素。

请注意,我将 your 替换toggleclick,因为该形式toggle已从 jQuery 中删除。


如果你想让菜单开始隐藏,你可以调整上面的。你想知道元素的宽度,基本上,当把它放在页外时。

此版本不关心菜单是否最初可见:Live Copy | 直播源

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div id="showmenu">Click Here</div>
<div class="menu" style="display: none; position: relative;"><ul><li>Button1</li><li>Button2</li><li>Button3</li></ul></div>
  <script>
    $(document).ready(function() {
        var first = true;

        // Hide menu once we know its width
        $('#showmenu').click(function() {
            var $menu = $('.menu');
            if ($menu.is(':visible')) {
                // Slide away
                $menu.animate({left: -($menu.outerWidth() + 10)}, function() {
                    $menu.hide();
                });
            }
            else {
                // Slide in
                $menu.show().css("left", -($menu.outerWidth() + 10)).animate({left: 0});
            }
        });
    });
  </script>
</body>
</html>

我会做这样的事情

JsBin 中的演示http : //jsbin.com/ofiqur/1/

  <a href="#" id="showmenu">Click Here</a>
  <div class="menu">
    <ul>
      <li><a href="#">Button 1</a></li>
      <li><a href="#">Button 2</a></li>
      <li><a href="#">Button 3</a></li>
    </ul>
  </div>

和在 jQuery 中一样简单

var min = "-100px", // remember to set in css the same value
    max = "0px";

$(function() {
  $("#showmenu").click(function() {

    if($(".menu").css("marginLeft") == min) // is it left?
      $(".menu").animate({ marginLeft: max }); // move right
    else
      $(".menu").animate({ marginLeft: min }); // move left

  });
});

试试这个:

<script type="text/javascript">
$.fn.toggleFuncs = function() {
    var functions = Array.prototype.slice.call(arguments),
    _this = this.click(function(){
        var i = _this.data('func_count') || 0;
        functions[i%functions.length]();
        _this.data('func_count', i+1);
    });
}
$('$showmenu').toggleFuncs(
        function() {
           $( ".menu" ).toggle( "drop" );
            },
            function() {
                $( ".menu" ).toggle( "drop" );
            }
); 

</script>

第一个功能是 JQuery 弃用切换的替代方法 :) 。适用于 JQuery 2.0.3 和 JQuery UI 1.10.3

<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $(".click-header").click(function(){
            $(this).next(".hidden-content").slideToggle("slow");
            $(this).toggleClass("expanded-header");
        });
    });
</script>
.demo-container {
    margin:0 auto;
    width: 600px;
    text-align:center;
}
.click-header {
    padding: 5px 10px 5px 60px;
    background: url(images/arrow-down.png) no-repeat 50% 50%;
}
.expanded-header {
    padding: 5px 10px 5px 60px;
    background: url(images/arrow-up.png) no-repeat 50% 50%;
}
.hidden-content {
    display:none;
    border: 1px solid #d7dbd8;
    padding: 20px;
    text-align: center;
}
<div class="demo-container">
    <div class="click-header">&nbsp;</div>
    <div class="hidden-content">Lorem Ipsum.</div>
</div>