javascript - 在 HTML5 中切换 div block 的可见性

Question

我正在尝试创建一个像所附图片一样的导航栏。

我想隐藏子类别并在单击主类别时显示。

我的 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>

Answer 1

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 库很重要(以使其运行)。所以添加它(我已经在我的示例中添加了它。)