如何關閉滑動開關

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

此外，如果您有多個滑塊，您可能會遇到另一個需要遍歷它們以修改其類的問題。