折叠式菜单的 JavaScript 代码

Question

(终于解决了)当每个人都告诉你代码很好，甚至演示了它，但它在你的地方不起作用时，那么你可能犯了一个小错误。我的顺序是 jQuery、menumaker 和最后我的本地脚本应该被调用的顺序(就是上面的顺序)，而不是任何其他顺序。

<script src="/scripts/jquery-1.12.0.min.js"></script>
<script src="https://s3.amazonaws.com/menumaker/menumaker.min.js"></script>
<script src="/scripts/01_MainMenu.js"></script>

这个错误是由 Google Chrome 调试器指出的，我直到现在才使用它，但从现在开始肯定会使用它。

(更新)感谢您的所有回答。对 jQuery 的引用存在于 jQuery 的本地副本中: <script src="/scripts/jquery-1.12.0.min.js"></script> 我还尝试了建议链接 gavgrif 的脚本，但不幸的是，它仍然无法正常工作。

但是我在 Mozilla Firefox 调试器中收到以下错误:

消息:jQuery 未定义。

错误消息引用脚本中的最后一行 (26)，即包含“(jQuery)”的行。

(原帖)

我从 CSS MenuMaker 收到了这个脚本，它应该制作一个带有子菜单展开/收缩的 Accordion 菜单。但我不明白最后的 (jQuery) 位，以及为什么整个脚本位于圆括号之间。我是一名 JavaScript 新手。

显然，该脚本不起作用。

(function($){
  $(document).ready(function(){

    $('#main_menu ul ul li:odd').addClass('odd');
    $('#main_menu ul ul li:even').addClass('even');
    $('#main_menu > ul > li > a').click(function() {
      $('#main_menu li').removeClass('active');
      $(this).closest('li').addClass('active'); 
      var checkElement = $(this).next();
      if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
        $(this).closest('li').removeClass('active');
        checkElement.slideUp('normal');
      }
      if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
        $('#main_menu ul ul:visible').slideUp('normal');
        checkElement.slideDown('normal');
      }
      if($(this).closest('li').find('ul').children().length == 0) {
        return true;
      } else {
        return false;   
      }     
    });

  });
})(jQuery);

HTML:

   <div id="main_menu">
   <ul>
      <li class="active"><a href="../Main.php">Home</a></li>
      <li><a href="/pages/04_Taxonomy.php">Taxonomy</a></li>
      <li><a href="/pages/01_PlantList.php">Virtual Herbarium</a></li>
      <li><a href="/pages/03_PlantData.php">Data Repository</a></li>
      <li class="has-sub"><a href="#">Sources</a>
         <ul>
            <li><a href="/pages/072_Surse_Books.php">Books</a></li>
            <li><a href="/pages/073_Surse_Journals.php">Journals</a></li>
         </ul>
      </li>
      <li><a href="#">Habitats</a></li>
      <li><a href="#">Endangered species</a></li>
      <li><a href="#">Papers</a></li>
   </ul>
   </div>

对应的CSS相当长。如果需要的话我会发布，但我个人不这么认为。

Answer 1

关于脚本不起作用 - 我刚刚将您的代码复制到此代码片段中来回答它并且它起作用 - 单击“源”链接将按预期打开和关闭子菜单。如果它不适合你，那么我怀疑你没有在文档的头部包含 jquery 库。

尝试添加

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

进入头部，看看是否有效。对于论坛的其余部分 - 是的，这应该是一条评论 - 但我想通过代码片段演示代码可以通过添加代码片段来工作:)

(function($){
  $(document).ready(function(){

    $('#main_menu ul ul li:odd').addClass('odd');
    $('#main_menu ul ul li:even').addClass('even');
    $('#main_menu > ul > li > a').click(function() {
      $('#main_menu li').removeClass('active');
      $(this).closest('li').addClass('active'); 
      var checkElement = $(this).next();
      if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
        $(this).closest('li').removeClass('active');
        checkElement.slideUp('normal');
      }
      if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
        $('#main_menu ul ul:visible').slideUp('normal');
        checkElement.slideDown('normal');
      }
      if($(this).closest('li').find('ul').children().length == 0) {
        return true;
      } else {
        return false;   
      }     
    });

  });
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <div id="main_menu">
   <ul>
      <li class="active"><a href="../Main.php">Home</a></li>
      <li><a href="/pages/04_Taxonomy.php">Taxonomy</a></li>
      <li><a href="/pages/01_PlantList.php">Virtual Herbarium</a></li>
      <li><a href="/pages/03_PlantData.php">Data Repository</a></li>
      <li class="has-sub"><a href="#">Sources</a>
         <ul>
            <li><a href="/pages/072_Surse_Books.php">Books</a></li>
            <li><a href="/pages/073_Surse_Journals.php">Journals</a></li>
         </ul>
      </li>
      <li><a href="#">Habitats</a></li>
      <li><a href="#">Endangered species</a></li>
      <li><a href="#">Papers</a></li>
   </ul>
   </div>