Question

我有这个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>，以便我可以使用它两次，但脚本会中断。

有什么想法吗？

Answer 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);
}

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

如何关闭切换滑块

1 个答案: