Javascript “原因可能是什么？”；jquery.min.js:2未捕获类型错误：无法读取属性'；每个'；是否为空；？

以下是我试图让您在我的文章中使用的代码：

这样做的目的是使用

localStorage

提供可折叠段落（div），以记住以前的状态（例如，当读者离开页面然后返回时）。请参见上面的jsbin链接以获取示例

在这一点上，如果我使用jsbin代码，它工作得很好。当我将代码放在Joomla中时，问题就出现了，它不再工作了。

toggleDiv

功能正常，但

localStorage

似乎不起作用。我认为这与document.ready功能有关，但我不确定。我还能用什么

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<script type="text/javascript">
$( document ).ready(function() {
  $(".collapsible").each(function(index) {
    if (typeof($(this).attr('id'))!="undefined") {
      id=$(this).attr('id')
      var state = localStorage.getItem(id)
      ele = document.getElementById(id)
      if (state=="true") {
        ele.style.display = 'block' 
      } else {
        ele.style.display = 'none' 
      }                          
    }
  })
});

window.toggleDiv = function(divId) {
  var ele = document.getElementById(divId);
  var state=$(ele).is(':visible');
  $(ele).toggle();
  state=$(ele).is(':visible');
  localStorage.setItem( divId, state);  
}
</script>

<style>
a:hover {
  color: purple;
}
a:active {
  color: purple;
}
</style>

<a class="ConceptLevel1" href="javascript:toggleDiv('PktS/h+L5EeSqM/4hMH9JA11');" 

style="text-decoration: none; font-weight:bold; font-size:13pt">Collapsible divs</a><br>
  <div class="collapsible" style="padding-left:15px; " id="PktS/h+L5EeSqM/4hMH9JA11">
      <div>fds</div>
      <div>sdfdsfdfdsf</div>
      <div>sdfsdf</div>
      <div>gdhgf</div>
    <a class="ConceptLevel2" href="javascript:toggleDiv('SPrQVTbDx0WO6As2F+43tw11');" style="text-decoration: none; font-weight:bold; font-size:12pt">hfghg</a><br>
    <div class="collapsible" style="padding-left:15px; " id="SPrQVTbDx0WO6As2F+43tw11">
      <div>hfghgh</div>
      <div>fghfgh</div>
    </div>
  </div>

返回此错误：

jquery.min.js:2 Uncaught TypeError: 
Cannot read property 'each' of null

---

只有在文章中插入代码时才会发生这种情况。在我看来，选择器

$（'.collapsable'）

不会返回任何结果。

即使jQuery找不到

.collapsable

，它也会返回一个空集合，并且会有

每个
方法

我的猜测是（特别是因为它只发生在Joomla中）其他脚本正在使用
$
变量。因此，事情可能按以下顺序发生：

jQuery加载
您的代码运行时，
$
是jQuery，因此
$（document）.ready
可以工作，但回调尚未执行
另一个脚本已加载并分配给
$
现在文档准备好了，将执行回调，
$
不再是jQuery
了解情况是否如此的最简单方法是将代码中的所有
$
替换为
jQuery
。例如：

jQuery( document ).ready(function() {
   jQuery(".collapsible").each(function(index) { ...

您还可以使用：

封装似乎解决了第一个函数的问题，但现在toggle函数给我一个错误101-t2:325 Uncaught TypeError:$（…）。is不是在toggle函数中使用$的onli行上的函数。我如何封装它？我以前使用JQuery而不是JQuery…：-（我浪费了这么多时间。它现在正在工作。太多了！
jQuery( document ).ready(function() {
   jQuery(".collapsible").each(function(index) { ...

(function($){
    $( document ).ready(function() {
        // ...your code...
    });
})(jQuery)