Question

按钮可以显示，但显示后不能隐藏元素。你能告诉我我错在哪里吗？

document.querySelector('.btn1').onclick = function(e) {
  let a = document.querySelector('.btn1content')
  if (a.style.display = ('none')) {
    a.style.display = ('block')
  } else {
    a.style.display = ('none')
  }
}

.btn1content {
  display: none;
}

<button class="btn1" BUTTON</button>
<p class="btn1content">Lorem ipsum</p>

Answer 1

您没有关闭按钮标签。试试这个

<button class="btn1">BUTTON</button>
<p class="btn1content">Lorem ipsum</p>

jQuery 将是

$(document).ready(function () {
            document.querySelector('.btn1').onclick = function (e) {
                let a = document.querySelector('.btn1content')
                if (a.style.display == ('none')) {//there will ==
                    a.style.display = ('block')
                } else {
                    a.style.display = ('none')
                }
            }
            
        });

Answer 2

HTML

<button class="btn1">BUTTON</button>
<p class="btn1content">Lorem ipsum</p>

查询

$(document).on('click', '.btn1', function(){
    $('.btn1content').toggle()
})

注意 - 无需更改任何 CSS

显示/隐藏元素 JS

2 个答案: