用 javascript 显示后隐藏 div

Question

我正在使用 javascript 通过单击按钮来显示隐藏的 div。 div显示后，我希望能够再次点击按钮隐藏div，等等...

这是我的 javascript:

<script type="text/javascript">
function showDiv() {
   document.getElementById('dropdownText').style.display = "block";
}
</script>

这是按钮：

<input type="button" name="answer" value="+" onclick="showDiv()" />

这是隐藏的div:

<div id="dropdownText" style="display:none;">
   This is the dropdown text.
</div>

Answer 1

您可以例如将指定的 class 绑定到元素并切换它。

function showDiv() {
   document.getElementById('dropdownText').classList.toggle("hidden");
}

.hidden {
  display: none;
}

<input type="button" name="answer" value="+" onclick="showDiv()" />
This is the hidden div:

<div id="dropdownText" class='hidden'>
   This is the dropdown text.
</div>

Answer 2

您只需要这样做：

const drop = document.getElementById('dropdownText')

const toggleDropdown = _ => {
   const cl = drop.classList
   cl.contains('hide')?cl.remove('hide'):cl.add('hide')
}

#dropdownText.hide {display:none}


/* DropDown Styles for this demo */ 
#dropdownText {width: 10em; height: 4em; background: green}

<button onclick='toggleDropdown()'>Toggle Div</button>
<div id='dropdownText'></div>

注意：点击Run Code Snippet查看代码。

它的工作方式是检测它是否有隐藏 class 并基于此切换 class。

实际的隐藏和显示是通过 CSS!

完成的

Answer 3

如果你也用 jQuery 标记了这个问题，那么我想你可以使用 .toggle 函数，就像这样 -

$('#answer').click(function() {
    $('#dropdownText').toggle();
}

如果您只想坚持使用 javascript，您的 showDiv() 函数应该如下所示 -

function showDiv() {
     let text = document.getElementById('dropdownText');
     if (text.style.display === 'none') {
       text.style.display = 'block';
    } 
    else {
    text.style.display = 'none';
    }
}

您应该在每次单击按钮时捕捉当前样式，因为您希望'toggle'它回到相反的状态。

Answer 4

<div id="dropdownText" style="display:none">
This is the dropdown text.
</div>

<script type="text/javascript">

function showDiv() {
    var x = document.getElementById('dropdownText');
    if (x.style.display === 'none') {
        x.style.display = 'block';
    } else {
    x.style.display = 'none';
    }
}
</script>

用 javascript 显示后隐藏 div

Hide div after showing it with javascript

html

javascript

css

show-hide