添加弹窗JavaScript后HTML隐藏内容按钮失效求助

核心问题是你自定义的$函数和jQuery的$别名冲突了！

你自己写了一个替代document.getElementById的$函数：

$ = function(id) { return document.getElementById(id); }

但jQuery也默认用$作为它的核心函数别名，这就导致两个函数互相覆盖：如果你的自定义$在jQuery之后加载，会把jQuery的$替换掉，那你写的$(document).ready()就会变成调用你自己的$函数，尝试获取id为document的元素（显然不存在），自然无法绑定按钮的点击事件。

下面给你两种解决办法：

办法一：修改自定义$的函数名 #

最简单的方式是把你自定义的$换成其他名字，比如$id，避免和jQuery冲突：

// 替换原来的$函数
const $id = function(id) { return document.getElementById(id); }

// 弹窗函数里的$(id)都换成$id(id)
var show = function(id) { $id(id).style.display ='block'; }
var hide = function(id) { $id(id).style.display ='none'; }

然后你的jQuery代码可以正常使用$：

$(document).ready(function() {
  $('#hideshow').click(function() {
    // 补全你的切换逻辑
    if ($(this).text() == '▼ VIEW CONFIGURATION ▼') {
      $(this).text('▲ HIDE CONFIGURATION ▲');
      $('#your-content-id').show(); // 替换成你要隐藏/显示的内容ID
    } else {
      $(this).text('▼ VIEW CONFIGURATION ▼');
      $('#your-content-id').hide();
    }
  });
});

办法二：让jQuery释放$的控制权 #

如果你不想改自定义函数的名字，可以用jQuery的noConflict()方法，把$的控制权还给你的自定义函数，之后jQuery代码用jQuery代替$：

// 引入jQuery后，先调用noConflict
jQuery.noConflict();

// 你的自定义$函数可以保留
$ = function(id) { return document.getElementById(id); }
var show = function(id) { $(id).style.display ='block'; }
var hide = function(id) { $(id).style.display ='none'; }

// jQuery代码里用jQuery代替$
jQuery(document).ready(function() {
  jQuery('#hideshow').click(function() {
    if (jQuery(this).text() == '▼ VIEW CONFIGURATION ▼') {
      jQuery(this).text('▲ HIDE CONFIGURATION ▲');
      jQuery('#your-content-id').show();
    } else {
      jQuery(this).text('▼ VIEW CONFIGURATION ▼');
      jQuery('#your-content-id').hide();
    }
  });
});

两种办法都能解决冲突，让你的隐藏按钮和弹窗功能同时正常工作。

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