<button onclick="updateProfile()">Change profile pic</button>
<form method='POST' id='form2' style="display:none;">
{% csrf_token %}
<fieldset class="form-group">
<legend class="border-bottom mb-4">
Join Today
</legend>
{{form2|crispy}}
</fieldset>
</form>
function updateProfile() {
console.log(this)
document.getElementById("form1").style.display = "block";
}我只能以一种方式更改效果。如何将效果改回显示：无，使表格不再可见？
这样的事情将达到目的：
updateProfile = () => {
let el = document.getElementById("form2");
if (getComputedStyle(el).display === 'none') {
el.style.display = "block";
} else {
el.style.display = "none";
}
}<button onclick="updateProfile()">Change profile pic</button>
<form method='POST' id='form2' style="display:none;">
<fieldset class="form-group">
<legend class="border-bottom mb-4">
Join Today
</legend>
</fieldset>
</form>或者，您可以利用以下data属性：
updateProfile = () => {
let el = document.getElementById("form2");
el.setAttribute('data-state',
el.getAttribute('data-state') === 'open' ? 'closed' : 'open');
}form[data-state=open] {
visibility: visible;
}
form[data-state=closed] {
visibility: hidden;
}<button onclick="updateProfile()">Change profile pic</button>
<form method='POST' id='form2' data-state="closed">
<fieldset class="form-group">
<legend class="border-bottom mb-4">
Join Today
</legend>
</fieldset>
</form>甚至是一些简单的旧类：
updateProfile = () => {
let el = document.getElementById("form2");
if (new Set(el.classList).has('show')) {
el.classList.remove('show');
el.classList.add('hide');
} else {
el.classList.remove('hide');
el.classList.add('show');
}
}.show {
display: block;
}
.hide {
display: none;
}<button onclick="updateProfile()">Change profile pic</button>
<form method='POST' id='form2' class="show">
<fieldset class="form-group">
<legend class="border-bottom mb-4">
Join Today
</legend>
</fieldset>
</form>希望能有所帮助，
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句