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

你可以，例如将指定的类绑定到元素并只是切换它。

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

如果你也用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';
    }
}

每次点击按钮时都应捕捉当前样式，因为您想要切换＆＃39;它回到了相反的状态。

Answer 3

您只需要这样做：

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查看正在运行的代码。

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

实际隐藏和显示是通过CSS完成的！

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

4 个答案: