将jQuery脚本转换为纯javascript?
HTML:将jQuery脚本转换为纯javascript?,javascript,navigation,toggle,Javascript,Navigation,Toggle,HTML: 切换导航 礼仪快捷菜单:
切换导航
礼仪快捷菜单:
这个jquery脚本用于隐藏Bootstrap3的导航菜单,但它在jquery中。如何将其转换为纯javascript
<button id='etiquette-xs-button' type="button" class='navbar-toggle margin-left-10px' data-toggle="collapse" data-target="#navigation-etiquette-collapse"> <!-- Set the data-target equal to the ID name of the div that holds the class of 'navbar-collapse' so that the main navigation menu doesn't collapse as well. #etiquette-xs-button only serves for selecting this button so the toggle of main navigation isn't selected. -->
<span class='sr-only'>Toggle navigation</span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
</button>
<div class="navbar-brand">Etiquette shortcut menu:</div>
</div><!-- END '#navbar-header' -->
<div id='navigation-etiquette-collapse' class='collapse navbar-collapse'><!-- ID "navigation-etiquette-collapse' is referenced only for data-target for <button data-toggle="collapse" -->
<ul class='nav navbar-nav' itemscope itemtype="http://www.schema.org/SiteNavigationElement">
<li class='dropdown xs-fix-menu'><a href="#" class='dropdown-toggle' data-toggle="dropdown">Etiquette Concepts: (First half) <b class='caret'></b></a>
<ul class='dropdown-menu'><!-- Don't forget that this <ul> needs class='dropdown-menu' to make it a dropdown menu for mobile -->
<li itemprop="name"><a onclick="toggleMobileHide()" itemprop="url" href="#header-container"><span>Introduction (back to top)</span></a></li><!-- #header-container is inside file: includes/header-start.php -->
<li itemprop="name"><a onclick="toggleMobileHide()" itemprop="url" href="#general-concepts"><span>General Concepts</span></a></li><!-- Target: #systems-collapse --><!-- Black-Cat-Kenpo -->
<li itemprop="name"><a onclick="toggleMobileHide()" itemprop="url" href="#becoming-a-student"><span>Becoming a Student</span></a></li>
<li itemprop="name"><a onclick="toggleMobileHide()" itemprop="url" href="#outside-the-martialarts-school"><span>Outside the martial arts school</span></a></li>
<li itemprop="name"><a onclick="toggleMobileHide()" itemprop="url" href="#etiquette-and-safety"><span></span>Etiquette when entering school</a></li>
<li itemprop="name"><a onclick="toggleMobileHide()" itemprop="url" href="#etiquette-in-the-reception-area"><span>Etiquette in reception area</span></a></li>
<li itemprop="name"><a onclick="toggleMobileHide()" itemprop="url" href="#uniform-and-belt"><span>Uniform and Belt</span></a></li>
<li itemprop="name"><a onclick="toggleMobileHide()" itemprop="url" href="#advice-from-the-master"><span>Advice from the Master</span></a></li>
<li itemprop="name"><a onclick="toggleMobileHide()" itemprop="url" href="#before-the-class-starts"><span>Before the class starts</span></a></li>
<li itemprop="name"><a onclick="toggleMobileHide()" itemprop="url" href="#during-class"><span>During class & requirements</span></a></li>
</ul>
$(文档).ready(函数(){
$('.下拉菜单a')。单击(函数(事件){
$('#礼仪xs按钮.导航栏切换')。单击();
});
});
我已经试过这个(下面),但没有成功。显然,有一些事件侦听器(我认为)阻止我添加和删除类。隐藏=显示:无;And.collapse.in=显示:块
<script>
$(document).ready(function () {
$('.dropdown-menu a').click(function(event) {
$('#etiquette-xs-button.navbar-toggle').click();
});
});
</script>
函数toggleMobileHide(){
var元素=document.getElementbyId('electricity-xs-button');
元素.classList.toggle('collapse','navbar toggle');
}
使用纯JavaScript和新的ES6语法:
<script>
function toggleMobileHide() {
var element = document.getElementbyId('etiquette-xs-button');
element.classList.toggle('collapse', 'navbar-toggle');
}
</script>
将转化为:
$(document).ready(function () {
$('.dropdown-menu a').click(function(event) {
$('#etiquette-xs-button.navbar-toggle').click();
});
});
});
但是,如果您喜欢不使用ES6语法的JavaScript(可能是为了IE兼容性),那么:
注意:如果您使用上述两个代码段中的任何一个,则无需再添加内联
onClick
,从而为您提供一个更干净的html文件。只需确保将脚本放在正文内容之后(例如,在页脚处)。@Dan要使其正常工作,您必须在bootstrap.js文件中进行细微更改,使其不依赖于jQuery。上面的代码片段只是您最初请求的jQuery的javascript等价物。我的网站不再使用jQuery。我使用的是:“bootstrap3v2.0.23的原生Javascript |©dnp|主题|。”该脚本的包含在页面底部,就在关闭标记之前。我在桌面版本中编写了一个脚本,添加了一个类以使菜单消失,但这是桌面版本,它只起作用(我认为),因为没有事件侦听器。我真的认为事件侦听器正在重写函数以切换导航栏。只是我的想法。
const btns = document.querySelectorAll('.dropdown-menu a');
const elem = document.getElementbyId('etiquette-xs-button');
function toggleDiv() {
elem.classList.toggle('collapse', 'navbar-toggle');
}
btns.forEach(btn => btn.addEventListener('click', toggleDiv));
var btns = document.querySelectorAll('.dropdown-menu a');
var elem = document.getElementbyId('etiquette-xs-button');
function toggleDiv() {
elem.classList.toggle('collapse', 'navbar-toggle');
}
btns.forEach(
function (btn){
btn.addEventListener('click', function () {
//toggled twice because IE cant handle a *toggle* with more than one parameter
elem.classList.toggle('collapse');
elem.classList.toggle('navbar-toggle');
});
}