Question

我的页面上有一个横幅，它的大小相当广泛，因此我想为用户提供切换其可见性的功能（使用Display属性/属性）。我的按钮可以用来设置Display：none，但是在再次单击时无法将其设置回Display：block。代码段：

CSS：

.banner-row {
    display: block;
}

HTML：

<button class="btn btn-default navbar-btn" onclick="toggleBanner()"><span class="dx-icon-collapse icon"></span></button>

JavaScript：

<script>
        function toggleBanner() {
            if (document.getElementById("banner-row").style.display = "block") {
                document.getElementById("banner-row").style.display = "none";
            }
            else if (document.getElementById("banner-row").style.display = "none") {
                document.getElementById("banner-row").style.display = "block"
            }
        }
</script>

我希望我的要求是可能的，对于我的任何愚蠢错误，我们深表歉意！还在学习所有这些东西。

Answer 1

有很多问题：

1）您正在尝试使用HTML中的id来设置元素的样式，而CSS中的元素是class。

2）您正在以=条件而不是doing a comparison (== or ===)分配（if/else）个值。

3）您正在检查内联样式，最初，标语没有一种，因此display为空。您可以像下面所做的那样检查，也可以使用getComputedStyle。

// Cache the element so you don't repeat yourself
const banner = document.getElementById("banner-row");

function toggleBanner() {
  if (banner.style.display === "block" || banner.style.display === '') {
    banner.style.display = "none";
  } else {
    banner.style.display = "block"
  }
}

#banner-row {
  display: block;
}

<div id="banner-row">BANNER</div>
<button class="btn btn-default navbar-btn" onclick="toggleBanner()">Click</button>

Answer 2

当您使用一个类来隐藏标题时，在JS中，您只需简单地切换类列表即可。

const banner = document.getElementById("banner-row");
const button = document.getElementsByTagName("button")[0];

toggleBanner = () => banner.classList.toggle("hidden");

.hidden {
  display: none;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div id="banner-row">
  <img src="https://via.placeholder.com/300x100">
</div>
<button class="btn btn-default navbar-btn" onclick="toggleBanner()">
  <span class="dx-icon-collapse icon"></span>
</button>

Answer 3

您需要在if和else if条件中使用==代替=。 ==是JavaScript中的比较运算符，=用于分配值。

尝试创建一个在“显示”和“阻止”之间切换的按钮，仅可使用一次

3 个答案: