JavaScript点击事件问题：按钮需点击两次才触发div可见性切换

一、原生JS函数第二次点击才生效的修复 #

你的第一个函数问题出在element.style.visibility只能读取元素的内联style属性，如果初始时.blocks-fnd-div的可见性是通过外部CSS或<style>标签设置的，第一次判断时element.style.visibility是空字符串，会直接执行else分支把元素设为hidden，第二次点击才会触发切换逻辑。

修复方案有两种：

方案1：使用计算样式获取实际可见性 #

function showElement() {
  var element = document.querySelector('.blocks-fnd-div');
  // 获取元素实际生效的样式
  var computedStyle = window.getComputedStyle(element);
  if (computedStyle.visibility === 'hidden') {
    element.style.visibility = 'visible';
  } else {
    element.style.visibility = 'hidden';
  }
}

方案2：用CSS类切换（更推荐，便于维护） #

先定义CSS类：

.hidden-element {
  visibility: hidden;
}

然后修改JS函数：

function showElement() {
  var element = document.querySelector('.blocks-fnd-div');
  element.classList.toggle('hidden-element');
}

这种方式不需要判断样式状态，直接通过toggle方法切换类，逻辑更简洁。

二、jQuery代码无法运行的修复 #

你的jQuery代码失效大概率是以下两个原因：

1. 没有在页面中引入jQuery库；
2. 代码执行时DOM还未加载完成，导致找不到.appr-btn元素。

修复后的代码：

步骤1：确保引入jQuery #

先在页面中引入jQuery库，可以从jQuery官网下载后本地引入，或使用公共CDN资源。

步骤2：用DOM就绪事件包裹代码，或把代码放body末尾 #

// 等待DOM加载完成后再绑定事件
$(document).ready(function() {
  $('.appr-btn').click(function() {
    // 用jQuery方法操作更简洁
    $('.blocks-fnd-div').css('visibility', function(index, currentValue) {
      return currentValue === 'hidden' ? 'visible' : 'hidden';
    });
  });
});

或者同样用类切换的方式（更推荐）：

$(document).ready(function() {
  $('.appr-btn').click(function() {
    $('.blocks-fnd-div').toggleClass('hidden-element');
  });
});

（需要配合前面定义的.hidden-element CSS类）

内容的提问来源于stack exchange，提问作者Guerra