在HTML5中切换div块的可见性

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

您的HTML中不存在item之类的内容。

您需要在那里使用class或id选择器。

在你的情况下，它需要是class选择器： -  $('.mainlink').click(function() {： -

＆＃13;

＆＃13;

$(document).ready(function() {
    $('.mainlink').click(function() {
        $(this).next('.sublink').toggleClass('visible');
    });
});

＆＃13;

.visible{
 display:block;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

注意： - 在脚本代码之前添加jQuery库（使其运行）非常重要。所以添加（我在我的例子中添加了它。）

Answer 2

更正您的选择器mainlink

＆＃13;

＆＃13;

$(document).ready(function() {
  $('.mainlink').click(function() {
    $(this).next('.sublink').toggleClass('visible');
  });
});

＆＃13;

.visible{
  display:block
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

问题在于：

EditText myText = new EditText(pageLayout.getContext());

但你的html中没有像'item'那样的东西。所以改成它：

$('item').click(function() {
    $(this).next('.sublink').toggleClass('visible');
});

因为$('.mainlink').click(function() { $(this).next('.sublink').toggleClass('visible'); }); 中有<div class="mainlink">个类。

Answer 4

您正在使用选择器try { $savePreference = $ErrorActionPreference $ErrorActionPreference = 'Stop' quser /server:$computer 2>&1 } catch [System.Management.Automation.RemoteException] { Write-Host "$computer is free" } finally { $ErrorActionPreference = $savePreference } 将其更改为item它将正常工作

.mainlink 用于访问.项目 class name

您需要使用 id 或类名作为选择器

＆＃13;

＆＃13;

.mainlink

＆＃13;

$(document).ready(function() {
    $('.mainlink').click(function() {
        $(this).next('.sublink').toggleClass('visible');
    });
});

＆＃13;

.visible{
 display:block;
}

＆＃13;

＆＃13;

＆＃13;