如何关闭切换滑块答案

【问题标题】：How to close toggle slider如何关闭切换滑块
【发布时间】：2014-03-04 18:21:28
【问题描述】：

我有这个 jquery 脚本：

<script>
var $root = $('html, body');
$('a').click(function() {
    var href = $.attr(this, 'href');
    $root.animate({
        scrollTop: $(href).offset().top
    }, 500, function () {
        window.location.hash = href;
    });
    return false;
});
// yeah let's do vanilla JS just for fun :P

var toggle = document.getElementById('toggle');
var slider = document.querySelector('.slider');

toggle.addEventListener('click', toggleSlider, false);

function toggleSlider(){
    if (slider.classList.contains('opened')) {
        slider.classList.remove('opened');
        slider.classList.add('closed');
    } else {
        slider.classList.remove('closed');
        slider.classList.add('opened');
    }
}



</script>

下面的这个链接通过从顶部向下滑动来切换框以打开和关闭。

<a href="#menu" id="toggle">Menu</a>

我想在打开的盒子内创建一个额外的链接，它只是关闭盒子。我试图做的是将getElementsById 重命名为getElementsByClassName，然后更新<a href="#menu" class="toggle">Menu</a>，以便我可以使用它两次，但脚本会中断。

有什么想法吗？

【问题讨论】：

标签： javascript jquery slider toggle uislider

【解决方案1】：

当您加载了 jQuery 后，您是否觉得需要在纯 javascript 中执行此操作？

应该像这样在 jQuery 中工作：

var $root = $('html, body');

$('a').click(function() {
    var href = $.attr(this, 'href');
    $root.animate({
        scrollTop: $(href).offset().top
    }, 500, function () {
        window.location.hash = href;
    });
    return false;
});

var $toggle = $('.toggle');
var $slider = $('.slider');

$toggle.on('click', function() {
    $slider.toggleClass('opened closed');
});

但是如果你坚持使用纯 Javascript，你是否记得遍历链接列表，因为 document.getElementsByClassName 返回一个节点数组并且事件监听器必须绑定到每个节点，而不是数组，因为那样会抛出错误。试试：

var toggle = document.getElementByClassName('toggle');
var slider = document.querySelector('.slider');

for(var i = 0; i < toggle.length; i++) {
    toggle[i].addEventListener('click', toggleSlider, false);
}

此外，如果您有多个滑块，您可能会遇到另一个需要遍历它们以修改其类的问题。

【讨论】：