我正在尝试创建一个像所附图片一样的导航栏。
我想隐藏子类别并在单击主类别时显示。
我的 HTML 是-
<div class="mainlink">
<h4><a href="#">Germany</a></h4>
</div>
<div class="sublink" hidden>
<ul>
<li><a href="#">League 1</a></li>
<li><a href="#">League 2</a></li>
</ul>
</div>
<div class="mainlink">
<h4><a href="#">United Kingdom</a></h4>
</div>
<div class="sublink" hidden>
<ul>
<li><a href="#">League 1</a></li>
<li><a href="#">League 2</a></li>
</ul>
</div>
我尝试使用以下 JS,但无法在单击主类别时显示子类别。我应该添加或更改什么?
<script>
$(document).ready(function() {
$('item').click(function() {
$(this).next('.sublink').toggleClass('visible');
});
});
</script>
最佳答案
item
不存在于您的 HTML 中。
您需要在那里使用class
或id
选择器。
在您的情况下,它需要是 class
选择器:-
$('.mainlink').click(function() {
:-
$(document).ready(function() {
$('.mainlink').click(function() {
$(this).next('.sublink').toggleClass('visible');
});
});
.visible{
display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mainlink">
<h4><a href="#">Germany</a></h4>
</div>
<div class="sublink" hidden>
<ul>
<li><a href="#">League 1</a></li>
<li><a href="#">League 2</a></li>
</ul>
</div>
<div class="mainlink">
<h4><a href="#">United Kingdom</a></h4>
</div>
<div class="sublink" hidden>
<ul>
<li><a href="#">League 1</a></li>
<li><a href="#">League 2</a></li>
</ul>
</div>
注意:- 在脚本代码之前添加 jQuery 库很重要(以使其运行)。所以添加它(我已经在我的示例中添加了它。)
关于javascript - 在 HTML5 中切换 div block 的可见性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43315910/