我对.js很新,并且一直在制作下拉导航菜单。我已经完成了大部分工作,但我被要求为菜单激活包含一个特定的片段。
我想知道如何在打开其他子窗口时隐藏或向上滚动其他子项目。
我在这里做错了什么?
<div id="nav_mob">
<div id="nav-toggle"><span></span></div>
<div class="dropdown_mob">
<ul>
<a class="dropdown_btn">
<li>Overview</li>
</a>
<div class="subnav_mob">
<ul>
<a href="#"><li>Introduction</li></a>
<a href="#"><li>Research</li></a>
<a href="#"><li class="padded">Planning & Preparation</li></a>
<a href="#"><li>International</li></a>
</ul>
</div>
<a class="dropdown_btn"><li>Profile</li></a>
<div class="subnav_mob">
<ul>
<a href="#"><li>My Account</li></a>
<a href="#"><li>My Cart</li></a>
<a href="#"><li>Check Out</li></a>
<a href="#"><li>Log Out</li></a>
</ul>
</div>
<a class="dropdown_btn"><li>Search</li></a>
<div class="subnav_mob">
<ul>
<li><div id="smallsearch"><input type="text"></div></li>
</ul>
</div>
</div>
</ul>
</div>
</div>
我给出的片段:
var dropdown = document.getElementsByClassName('dropdown_btn');
var i;
for (i = 0; i < dropdown.length; i++) {
dropdown[i].addEventListener('click', function() {
this.classList.toggle('active');
var dropdownContent = this.nextElementSibling;
if (dropdownContent.style.display == 'block') {
dropdownContent.style.display = 'none';
} else {
dropdownContent.style.display = 'block';
}
});
}
我试图实现的修复:
$(document).ready(function() {
$('.dropdown_btn').on('click', function() {
var state = $('.dropdown_btn').is('.active');
if(state) {
$('.dropdown_btn').removeClass('active').next('.subnav_mob')
.slideUp();
} else {
$('.dropdown_btn').addClass('active').next('.subnav_mob').slideDown();
$.closest('.dropdown_btn').siblings('.dropdown_btn')
.find('.dropdown_mob').slideUp().end();
$.find('.dropdown_btn').not(this).removeClass('active');
}
})
})
答案 0 :(得分:0)
您的第一个问题是$('dropdown_button')
选择具有相同类的每个元素,而不仅仅是您单击的元素。因此,对其进行操作将立即对每个下拉列表进行操作。您可能已经注意到,单击一个按钮会导致每个下拉列表打开,单击另一个按钮会导致所有下拉列表再次关闭。这就是原因。
你的第二个问题是$.closest
不是一件事。如果你按F12并检查控制台,你会注意到该行引发了一个错误,说是“最接近的”#39;不是一个功能。它实际上是未定义的,并且尝试将其作为具有()
的函数调用它会导致此错误。这可以防止在此点之后运行任何代码,但即使您修复此代码仍然因类似原因而无法工作。例如,$.find
也不是一个函数。 closest
和find
,如next
和slideup
,是jQuery实例上的方法,而不是全局jQuery对象本身。
这应该有效。请注意,$(this)
是指包含在JQuery实例中的clicked元素:
$(document).ready(function() {
$('.dropdown_btn').on('click', function() {
var state = $(this).is('active');
if(state) {
$(this).removeClass('active')
.next('.subnav_mob').slideUp();
} else {
$(this).addClass('active')
.next('.subnav_mob').slideDown();
$(this).siblings('.dropdown_btn').removeClass('active')
.next('.subnav_mob').slideUp();
}
})
})
我建议逐步完成每个调用,将其与jQuery documentation进行比较,以确保您理解它。我也可能建议在没有jQuery的情况下尝试这样做 - 使用原始代码片段正在进行的原生DOM API。这样的练习可能令人沮丧,但很有价值。