jquery slidetoggle 两个单独的元素，带有 1 个单击事件答案

【问题标题】：jquery slidetoggle two seperate elements with 1 click eventjquery slidetoggle 两个单独的元素，带有 1 个单击事件
【发布时间】：2023-03-20 04:12:01
【问题描述】：

尝试在 1 次单击事件上滑动切换两个单独的元素。有点工作，但是一个元素没有动画，我在使动画流畅时遇到问题

CSS

.wrapper {
    width: 300px; margin: 10px auto; height: 300px;
    background-color: #e5e5e5; 
    border: 1px solid #d8d8d8;
    position: relative;
}

.menu { 
    list-style: none; margin: 0; padding: 0; width: 62%; background-color: blue;
    position: absolute; right: 0; top: 0; height: 100%; display: none; z-index: 300;
}

a { 
    display: block; width: 50px; height: 60px; background-color: orange; 
    position: absolute; right: 5%; z-index: 500;
}

.moveButton { right: auto; left: 38%; }

HTML

<div class="wrapper">
<a href="#">Menu</a>
<ul class="menu">
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
</ul>
</div>

jquery

$('a').click(function() { var 效果 = '幻灯片'; var options = {方向：'正确'} var 持续时间 = 200;
$('.menu').stop().toggle(effect, options, duration);

$(this).toggleClass('moveButton'); });

小提琴 http://jsfiddle.net/NZ2DX/

注意事项 我试过为toggleClass设置动画，但它是从左边而不是右边进来的

展开时菜单按钮应在菜单内

【问题讨论】：

这种方式你试过了吗jsfiddle.net/8gMQ4
是的，我做到了，但按钮必须与菜单的左侧齐平，所以我必须使用 left: 38% 然后它从左侧动画（如上所述）
为 moveButton 提供 62%，这是较大的 div 将占据的位置。

标签： javascript jquery

【解决方案1】：

我猜你想要this。

$('a').click(function () {
    var effect = 'slide';
    var options = {
        direction: 'right'
    }
    var duration = 200;
    if ($('.menu').is(":hidden")) {
        $(this).animate({
            right: "62%"
        }, duration);
    } else {
        $(this).animate({
            right: "5%"
        }, duration);
    }
    $('.menu').stop().toggle(effect, options, duration);
});

如果您真的希望按钮位于菜单顶部，您可以像 this 一样进行操作。

$('a').click(function () {
    var effect = 'slide';
    var options = {
        direction: 'right'
    }
    var duration = 200;
    if ($('.menu').is(":hidden")) {
        var w = $(this).parent().width()*0.62 - $(this).width();
        $(this).animate({
            right: w
        }, duration);
    } else {
        $(this).animate({
            right: "5%"
        }, duration);
    }
    $('.menu').stop().toggle(effect, options, duration);
});

【讨论】：