javascript - 将关闭按钮添加到 JavaScript 动画面板

标签 javascript jquery html slidetoggle

我正在使用以下 javascript 在单击链接时将打开的面板向右滑动。

jQuery(函数($){

$('a.panel').click(function() {
    var $target = $($(this).attr('href')),
        $other = $target.siblings('.active'),
        animIn = function () {
            $target.addClass('active').show().css({
                left: -($target.width())
            }).animate({
                left: 0
            }, 500);
        };

    if (!$target.hasClass('active') && $other.length > 0) {
        $other.each(function(index, self) {
            var $this = $(this);
            $this.removeClass('active').animate({
                left: -$this.width()
            }, 500, animIn);
        });
    } else if (!$target.hasClass('active')) {
        animIn();
    }
});

});

现在我还想在每个面板中添加一个关闭按钮,当点击时,面板应该关闭/向左滑动。

我有这个jsfiddle继续努力

有什么想法吗?谢谢。

最佳答案

给你 -

Working Demo

$('.close').click(function(){        
        $(this).closest('.panel').animate({
                    left: -200
                }, 500);
    });

关于javascript - 将关闭按钮添加到 JavaScript 动画面板,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12913821/

相关文章:

javascript - 在 owlcarousel 中使用相同的按钮/ Controller 控制两个 slider 的组件?

html - "One page"/"long front page"网页设计?

html - 我们能否拥有一个在所有浏览器中具有相同外观/样式的 HTML 音频播放器 (<audio>)?

javascript - Es6 React 组件引用

javascript - 根据下拉列表中的选择显示 div 的内容

javascript - 奇怪的 Bootstrap Carousel Issue..first slide 最初没有加载

Javascript 通过 AJAX 实现 Bootstrap Modal

javascript - querySelector 似乎正在从输入 id "#submit"和另一个输入类型 ="submit"识别 ="submit"

javascript - 多个图像的相同 onclick js 函数

jquery - 如果需要播放其他音频,如何停止音频