アコーディオンメニューの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デバッガでエラーが指摘されましたが、これまで使用していませんでしたが、今から使用されます。

（更新）すべてのお返事ありがとうございます。<script src="/scripts/jquery-1.12.0.min.js"></script> 私はまた、gavgrifが提案したリンクでスクリプトを試しましたが、残念ながらまだ動作していません。

しかし、私はMozilla Firefoxのデバッガで次のエラーを取得する：

メッセージ：jQueryのが定義されていません。

エラーメッセージは、スクリプトの最後の行（26）、 "（jQueryの）" を含むものを指します。

（オリジナルポスト）

私は、サブメニューの拡大/契約にアコーディオンメニューを作ることになっているCSS MenuMakerの、からこのスクリプトを受けました。しかし、私は最後に（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>

Answer 2

他のスクリプトがあなたのコード内の他のものに '$'を使用している場合、全体のアイデアはこのスクリプトを「保護する」ことです。これは完全に有効なスクリプトです。

使用される「通常の」jQueryオブジェクトは「jQuery」です。しかし、 '$'はショートカットとして使うことができます。残念ながら、他のフレームワークでも '$'が使用されています。このようなフレームワークを使用する場合、このスクリプトはもう使えませんでした。だから、

：

(function($){ 

//Code using '$' 

})(jQuery) 

を防ぐこと。そして、これは（それは非常に簡単です）方法です。 パラメータを取る無名関数を宣言します。このパラメータは$と呼ばれます（param1など）。 これは、変数 'jQuery'（これはグローバルに定義されている）である関数を呼び出します。

これは同様であろう：

function foo(param1){ 
    param1('#main_menu ul ul li:odd').addClass('odd'); 
    param1('#main_menu ul ul li:even').addClass('even'); 
    //...etc... 
} 

foo(jQuery); 

私はそれが役に立てば幸い。