2012-02-11 22 views
0

jQuery UI 1.8.17をダウンロードしてインストールしましたが、私はアコーディオンを適用しようとしましたが、運がないです。jQuery UIアコーディオンが動作しません

私のコードは以下の通りです:

HTML

<html> 
<head> 
    <title>Document Title</title> 
    <link href="../../css/tinyMCE/jquery_ui_wp_theme/jquery-ui-1.8.17.custom.css" rel="stylesheet" type="text/css" /> 
    <script type="text/javascript" src="../../js/jquery-1.7.1.min.js"></script> 
    <script type="text/javascript" src="../../js/jquery-ui-1.8.17.custom.min.js"></script> 
    <script type="text/javascript" src="js/shortcodes.js"></script> 
</head> 
<body> 
    <div id="codes"> 
     <h3><a href="#">Shortcode name</a></h3> 
     <div><p>Dialog content</p></div> 
     <h3><a href="#">Shortcode name</a></h3> 
     <div><p>Dialog content</p></div></div> 
    </div> 
</body> 
</html> 

はJavaScript

jQuery(document).ready(
    function($) 
    {   
     $('#codes').accordion(); 
    } 
); 

上記のコードの問題は、アコーディオンが正しくレンダリングされながら、ということですまったく機能しません。つまり、アコーディオンのパネルヘッダーをクリックすると、何のアクションもありません。

また、私のコンソールにはJavaScriptエラーはなく、すべてのファイルが正常にロードされています。どのようにその問題を解決するための任意のアイデアですか?

This is the accordion as it is rendered

+0

ページ上の他のスクリプトやJavaScriptライブラリ、プラグインを持っていますか? – random

+0

私は他のプラグインを使用していません。 : –

答えて

2

あなたは準備ができて、関数のシグネチャで$を望んでいない:

jQuery(document).ready( 
    function() 
    {   
     $('#codes').accordion(); 
    } 
); 

あなたは、おそらく一般的にプラグインがあることを確認するために使用されますプラグインのソースからこのパターンをコピーしましたjQueryの$を使用しています。 prototype - あなたのプラグインを無名関数として宣言し、jQueryオブジェクトを渡してすぐにそれを呼び出します。準備ができている関数がパラメータを受け入れるなら(それはわかりませんが、the docsはそれが通常のバウンドイベントであることを示唆しています)、それはイベントオブジェクトであり、jQueryオブジェクトではありません。

+0

これは私の問題を解決しません:(まだそこに問題があります –

1

jQueryのように、多くのJavaScriptライブラリでは、関数または変数名として$が使用されています。 jQueryの場合、$はjQueryのエイリアスなので、$を使用せずにすべての機能を利用できます。 jQueryの横に別のJavaScriptライブラリを使用する必要がある場合は、jQuery.noConflict()を呼び出して$を他のライブラリに戻すことができます。

は、ここでは例を参照してください。

jQuery.noConflict(); 
(function($) 
{ 
    $('#codes').accordion(); 
}) 
(jQuery); 
+0

プロブルは$記号ではありません私のコンソールでエラーは出ません!!そしてプラグインは正常に表示されます。機能 –

+0

ここで共有しているコードを使用してください。http://jsfiddle.net/vikastyagi87/cPGFE/ –

関連する問題