Question

所以我有2个按钮，1个用于显示嵌入，1个用于隐藏嵌入。它们看起来像这样：

<div class="button">
    <button class="btn-info" onclick="hide('myPdf')" type="button">HIDE</button>
</div>
<div class="button">
    <button class="btn-info" onclick="show('myPdf')" type="button">SHOW</button>
</div>

我用来显示/隐藏的JavaScript是这样的：

<script> 
            function show(target) {
                document.getElementById(target).style.visibility = 'visible';
            }

            function hide(target) {
                document.getElementById(target).style.visibility = 'hidden';
            }
</script>

我想要一个按钮，在每次点击时显示/隐藏。

Answer 1

HTML

<div class="button">
    <button class="btn-info" onclick="toggle('myPdf')" type="button">Toggle PDF</button>
</div>

的JavaScript

<script> 
        function toggle(target) {
            var curVal = document.getElementById(target).style.visibility;
            document.getElementById(target).style.visibility = (curVal === 'visible') ? 'hidden' : 'visible';
        }
</script>

Answer 2

使用jQuery

很好，很简单，你可以使用jQuery的toggleClass()函数来完成这项工作。

只需创建一个隐藏要切换元素的类，然后切换该类！

这是一个JSFiddle：https://jsfiddle.net/fLg7mg5x/1/

在CSS中创建一个.hidden类：

.hidden {
  display: none;
}

然后在按钮的click事件上切换它：

$("#your-toggle-button").on("click", function() {
  $("#myPdf").toggleClass("hidden");
})

使用Vanilla JS

如果你想使用Vanilla JS，你可以这样做：

只需创建一个.hidden类，如上所述（display: none），然后在事件处理程序中切换它：

<button onclick="showHide('myPdf')" type="button">
    Show/Hide
</button>

然后在JS中创建一个function来处理点击：

function showHide(target) {
  var targetElement = document.getElementById(target);
  targetElement.classList.toggle("hidden");
}

这是Vanilla JS解决方案的JSFiddle：https://jsfiddle.net/yafmLrod/

可见性或显示？

请注意以下事项：

设置visibility只会更改元素的物理可见性。将其设置为＆＃34;隐藏＆＃34; 不会从视图中折叠它 - 因此留下一个空格，元素通常是
将display设置为none会折叠该元素，下面的其他元素将移动到它曾占据的空间 - 就好像该元素从未存在一样

根据您的选择，您可以在两种情况下使用.hidden类：

<强>可见性

.hidden {
  visibility: hidden;
}

<强>显示

.hidden {
  display: none;
}

明智地选择！

希望这有帮助！：）

显示/隐藏嵌入功能

2 个答案:

使用jQuery

使用Vanilla JS

可见性或显示？