jQuery点击鼠标显示和隐藏div元素（动画效果）

Question

jQuery点击鼠标显示和隐藏div元素（动画效果）

31

这是我的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>

我想要实现的功能是，在单击#showmenu或页面上任何位置时，从左侧滑动（使用动画）并显示.menu。再次单击#showmenu或页面上任何位置时，.menu将隐藏（向左滑动）。

我使用的是JQuery 2.0.3版本。

我尝试了以下代码，但不符合我的需求。

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

- MM PP

1

我认为“-1”是因为你没有在这里提供你尝试过的内容。 - krishwader

3

我没有点踩，但是谁点了踩可能会想知道你尝试过什么。另外，如果你想要可点击的元素，我建议使用锚标签（在你的 div 和 li 内部），这样你的页面可以适用于不能或不使用鼠标或其他指向设备的键盘用户。 - nnnnnn

那么，你展示的JS的问题是它确实显示和隐藏菜单，但是上下移动而不是左右移动吗？还是根本不起作用？.toggle()方法在jQuery 1.9版本中被_删除_。 - nnnnnn

1

你使用的是哪个版本的jQuery？ - nnnnnn

1

它曾经被弃用，但现在已被移除。您可以查看您的代码是否适用于 jQuery 的 1.9 版本之前：http://jsfiddle.net/APA2S/ - nnnnnn

显示剩余7条评论

6个回答

13

当然，slideDown和slideUp不能满足您的需求。您说您希望它向左/向右，而不是向上/向下。

如果您在问题中添加了jquery-ui标签，则表示正在使用jQuery UI，我建议使用nnnnnn的解决方案，使用jQuery UI的slide效果。

如果不是:

假设菜单一开始可见（编辑：糟糕，我看到这不是一个有效的假设；请参阅下面的注释），如果您想要将其向左滑出，然后稍后再从左侧滑回来，您可以这样做：实时示例 | 实时源代码

$(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。

请注意，我用click替换了你的toggle，因为那种形式的toggle已经从jQuery中删除了。

如果您想要隐藏菜单，可以调整上面的内容。基本上，在将其放到页面之外时，您需要知道元素的宽度。

这个版本不关心菜单最初是否可见：实时复制|实时源码

<!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>

- T.J. Crowder

2

我会像这样做：

我会像这样做

在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

  });
});

- balexandre

0

试试这个：

<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弃用的toggle的替代品 :)。与JQuery 2.0.3和JQuery UI 1.10.3兼容良好

- John Doe

0

<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>

- Porta Shqipe

0

使用slideToggle(500)函数并设置以毫秒为单位的持续时间，以获得更好的效果。

示例HTML

<body>
    <div class="growth-step js--growth-step">
        <div class="step-title">
            <div class="num">2.</div>
            <h3>How Can Aria Help Your Business</h3>
        </div>
        <div class="step-details ">
            <p>At Aria solutions, we’ve taken the consultancy concept one step further by offering a full service
                management organization with expertise. </p>
        </div>
    </div>
    <div class="growth-step js--growth-step">
        <div class="step-title">
            <div class="num">3.</div>
            <h3>How Can Aria Help Your Business</h3>
        </div>
        <div class="step-details">
            <p>At Aria solutions, we’ve taken the consultancy concept one step further by offering a full service
                management organization with expertise. </p>
        </div>
    </div>
</body>

在您的JS文件中，如果需要动画的子级传播，请删除第二个点击事件函数及其代码。

$(document).ready(function(){
    $(".js--growth-step").click(function(event){
       $(this).children(".step-details").slideToggle(500);
         return false;
    });
//for stoping child to manipulate the animation
    $(".js--growth-step .step-details").click(function(event) {
        event.stopPropagation();
   });
});

- Rafiq

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- nnnnnn · Accepted Answer

.toggle() 方法在 jQuery 1.9 版本中被移除。你可以使用以下方法代替：

$(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 的滑动效果，但你已将该标签添加到你的问题中，所以我假设这是可以接受的。