Question

在Opera浏览器中-控制台部分中-给出以下错误：

pen.js：19未捕获的TypeError：$（...）。addclass不是函数

在HTMLLIElement。（pen.js：19）

在HTMLLIElement.dispatch（jquery-3.4.1.js：5237）

在HTMLLIElement.elemData.handle（jquery-3.4.1.js：5044）

html代码：

<div id="wrapper">
  <div id="sidebar-wrapper">
     <ul class="sidebar-nav" id="menu">
        <li class="active">
           <a href="#">
              <div style=" position: relative; top: 5px; margin-left: 10px; display: inline-flex; width: 20px; height: 20px; background-color: green; "></div>title1
           </a>
           <ul class="nav-stacked" style="list-style-type:none;">
              <li>
                 <a href="#">
                    <div style=" position: relative; top: 5px; margin-left: 10px; display: inline-flex; width: 20px; height: 20px; background-color: blue; "></div>title1.1
                 </a>
              </li>
              <li>
                 <a href="#">
                    <div style=" position: relative; top: 5px; margin-left: 10px; display: inline-flex; width: 20px; height: 20px; background-color: blue; "></div>title1.2
                 </a>
              </li>
           </ul>
        </li>
        <li>
           <a href="#">
              <div style=" position: relative; top: 5px; margin-left: 10px; display: inline-flex; width: 20px; height: 20px; background-color: green; "></div>title2
           </a>
           <ul class="nav-stacked" style="list-style-type:none;">
              <li>
                 <a href="#">
                    <div style=" position: relative; top: 5px; margin-left: 10px; display: inline-flex; width: 20px; height: 20px; background-color: blue; "></div>title2.1
                 </a>
              </li>
              <li>
                 <a href="#">
                    <div style=" position: relative; top: 5px; margin-left: 10px; display: inline-flex; width: 20px; height: 20px; background-color: blue; "></div>title2.2
                 </a>
              </li>
           </ul>
        </li>
           <a href="#">
              <div style=" position: relative; top: 5px; margin-left: 10px; display: inline-flex; width: 20px; height: 20px; background-color: yellow; "></div>close/open
           </a>
        </li>
     </ul>
  </div>
  <div id="page-content-wrapper">
     <div id="abc1" class="page-content-wrapper-content display_block">
        <h1>content1</h1>
     </div>a
     <div id="abc2" class="page-content-wrapper-content">
        <h1>content2</h1>
     </div>
  </div>
</div>

jquery代码：

function initMenu() {
   $('#menu li ul li').click(function() {
      // add class for active li + remove class from other li
      $('#menu li ul li.sidebar-nav-active').removeClass('sidebar-nav-active');
      $(this).addClass('sidebar-nav-active');

      // show content for this li
      $('.page-content-wrapper-content.display_block').removeClass('display_block');
      var pos = $( "li" ).index( $(this) );
      //alert(pos);
      $('.page-content-wrapper-content:nth-child(1)').addclass('display_block');
   });
}

$(document).ready(function() {
   initMenu();
});

Answer 1

这只是一个错字。其addClass而非addclass（JavaScript的标识符区分大小写）。更改此设置，您的代码应会按预期工作。

所以您的代码将变成这样：

function initMenu() {
   $('#menu li ul li').click(function() {
      // add class for active li + remove class from other li
      $('#menu li ul li.sidebar-nav-active').removeClass('sidebar-nav-active');
      $(this).addClass('sidebar-nav-active');

      // show content for this li
      $('.page-content-wrapper-content.display_block').removeClass('display_block');
      var pos = $( "li" ).index( $(this) );
      //alert(pos);
      $('.page-content-wrapper-content:nth-child(1)').addClass('display_block');
   });
}

pen.js：205未捕获的TypeError：$（...）。addclass不是函数

1 个答案: