Question

我尝试创建一个toggle按钮，可以使用HTML标记的类adsetTarget设置标记＆＃34; li＆＃34;点击事件为hidden或visible。

在页面加载期间，＆＃34; li＆＃34;标签是隐藏的。这是将初始页面加载事件设置为hidden的代码。这工作正常。

var appBanners = document.getElementsByClassName('adsetTarget'), i;

    for (var i = 0; i < appBanners.length; i ++) {
        appBanners[i].style.display = 'none';
        }

以下是尝试设置toggle按钮功能的代码。在第一次点击时，它正在显示内容，但再次点击它时，内容没有隐藏，有人可以帮忙。

var adsetTargets = document.getElementsByClassName('adsetTarget'), i;
    for (var i = 0; i < adsetTargets.length; i ++) {
        if (adsetTargets[i].style.display = 'none')
        adsetTargets[i].style.display = '';
        else
        adsetTargets[i].style.display = 'none'; //this is not working, I believe

        }

Answer 1

您必须更改以下行：

if (adsetTargets[i].style.display == 'none')

注意双等于？

Answer 2

您可以使用此功能使其对您应用于元素的任何样式感知敏感。它将记住以前的样式并重新应用它（理论上是heh）

＆＃13;

function showhide() {
    var adsetTargets = document.getElementsByClassName('adsetTarget'), i;

    for (var i = 0; i < adsetTargets.length; i ++) {

        if (adsetTargets[i].style.display == 'none') {
            adsetTargets[i].style.display = adsetTargets[i].getAttribute('data-previous');
        }
        else {
            adsetTargets[i].setAttribute('data-previous',adsetTargets[i].style.display);
            adsetTargets[i].style.display = 'none'; //this is not working, I believe
        }

     }
}

＆＃13;

<ul>
  <li class="adsetTarget" style="display:table">abc</li>
  <li class="adsetTarget"  style="display:block">123</li>
  <li class="adsetTarget"  style="display:inline-block">def</li>
  <li class="adsetTarget"  style="display:inline-block">456</li>
</ul>
<input type="button" onclick="showhide()" value="click me">

＆＃13;

设置style.display = none时，不显示<li>标签

2 个答案: