Q&A
スイマセン上記の文章からでは質問者様が抱えている問題の事象が何かわかりません。端的に「どう動いてほしいのか」「現状どうなっているか」を書いて下さい。
現在、WordPressでWebページを作成してJqueryを利用している箇所でうまくいかず、自分では解決できそうもないので質問をさせていただきます。皆様のお力をお貸しください・・・よろしくお願いいたします。
やりたいことと現状の写真
↓640pxまでのアコーディオン状態ですべて閉じている状態。
↓アコーディオンを開いている状態で"閉じる"のボタンを押すとアコーディオンが閉じる(下記のJqueryコードのif(jQuery('.Section').size() > 0){からがこの閉じるボタンのコードです。
↓アコーディオンをそれぞれクリックすると中身がスライドダウンして、その前に開いていたアコーディオン箇所はスライドアップし閉じます。
↓WordPress化させて動かない原因
↓WordPressで対象の部分を"開発者ツール"で確認した際のエラー箇所
※HTMLコードとCSSコードを入れようとしましたが、文字数を超えてしまうので投稿できませんでした。
なので、下記のCodepenさんのURLのソースさんを元にお願いします。
#参考
codepen:http://codepen.io/kazmeyer/pen/lzqhf
#やりたいこと
Jquery
1 jQuery(function($){ 2 var $accordion = jQuery('.tab_drawer_heading'); 3 4 jQuery(".tab_content").hide(); 5 jQuery(".tab_content:first").show(); 6 7//タブモード(768px時) 8 jQuery(".tabs li").click(function(){ 9 jQuery(".tab_content").hide(); 10 11 var activeTab = '#' + $(this).attr("rel"); 12 13 jQuery(activeTab).fadeIn(); 14 15 jQuery(".tabs li").removeClass("active"); 16 jQuery(this).addClass("active"); 17 jQuery(".tab_drawer_heading").removeClass("d_active"); 18 jQuery(".tab_drawer_heading[rel^='"+activeTab+"']").addClass("d_active"); 19 }); 20 21 //アコーディオンモード(640px時まで) 22 jQuery(".tab_drawer_heading").click(function(){ 23 jQuery(".tab_content").hide(); 24 jQueryaccordion.removeClass('open_close'); 25 jQuery(this).addClass('open_close'); 26 27 var d_activeTab = '#' + $(this).attr("rel"); 28 jQuery(d_activeTab).slideDown(); 29 jQuery(".tab_drawer_heading").not($(d_activeTab).slideUp()); 30 jQuery(".tab_drawer_heading").removeClass("selected"); 31 jQuery(this).addClass('selected'); 32 jQuery(".tabs li").removeClass("active"); 33 jQuery("ul.tabs li[rel^='"+d_activeTab+"']").addClass("active"); 34 }); 35 36if(jQuery('.Section').size() > 0){ 37 //コンテンツの数 38 var slideContentNum = jQuery('.tab_drawer_heading').length; 39 //コンテンツ分のフラグ 40 var navFlag = new Array(); 41 for( i = 0 ; i < slideContentNum ; i++ ){ 42 navFlag[i] = true; 43 }; 44 jQuery(".Section #close").click(function(){ 45 var closeNum = (jQuery(this).parents('.tab_drawer_heading').index()); 46 jQuery(this).parents('section').slideUp('fast'); 47 jQueryaccordion.removeClass('open_close'); 48 jQuery(this).parents('section').prev('a').removeClass('.Section'); 49 navFlag[closeNum] = true; 50 }); 51 } 52 });
#試したこと
上記のJqueryコードで、タブモード(768px)の時はクリックしたタブの中身以外をフェードアウトし、クリックしたタブの中身をフェードインするのはうまくいくのですが、
問題が、アコーディンモード(640px時)で対象としているクラス部分をクリックするとスライドダウンし他の選択しなかった箇所は隠れるようになっていますが、Bracketsの方でWordPressに変更前だと動くのですが・・・
個人的に試してみるとどうも
var d_activeTab = '#' + $(this).attr("rel");
の選択してた複数要素を操作する箇所が問題を起こしているのか。
普通にjQuery(".tab_drawer_heading").click(function(){のクリック箇所を押すとほかの要素ごとスライドダウンしたり要素自体がなくなってしまいます。
#補足
上記のWordPressのエラーコード(yu-campaign.js)の24行目がないぞと言われてます。
※yu-campaign.jsは、上記のJqueryコードです。
その24行目が
jQueryaccordion.removeClass('open_close');
となっているので"open_close"が見つからないんだがと言われますが、対象のアコーディオン部分をクリックする前にはエラーが出てきませんでした。その後アコーディオンの箇所をクリックし、開いている箇所が閉じると上記のWordPressのエラー画像がでます。
補足願います。codepenのコードとご提示のコードがずいぶん違うようですが、どちらが正しいのですか？ また、jQueryaccordionというのは何かのプラグインとかでしょうか。コードを参照できるURLをご提示ください。
あ、もしかして、$accordionという変数を使っていたところ、$とjQueryをテキスト置換してできたのがjQueryaccordionという変数名だったりして？
ブラウザの開発者ツールのコンソールにエラーが出力されていれば掲載してください
MasakazuFukami様お返事ありがとうございます。現状がわかるように写真と説明を添付し更新いたしました。
Lhankor_Mhy様、codepenのコードを元に少し改良を加えております。プラグインは利用していません。コードを参照できるURLのやり方がわからないので困ってますね
yuki84web様お返事ありがとうございます。Chromeの開発者ツールでエラーを確認した際に出た画像を記載いたしまた・・・いろいろとエラーが出ていますので確認してみます。
回答1件
0
ベストアンサー
投稿2017/04/12 11:55
総合スコア36074
Lhankor_Mhy様アドバイスありがとうございます。
jQUeryaccordionを$accordionに変更しましたらエラーはでなくなりました。
あとは、アコーディオンをクリックするとずっとスライドアップとダウンを繰り返す状態に陥っています。
まだどこかに原因があるようです。
リンク先を読んでみます。
詳しいエラーを見る場合はFireFoxよりもChromeの開発者ツールのほうがいいのでしょうか？
あと、上記のリンク先の通りによく英語の内容を読んでコードを変えながらやっていこうと思います。
ベストアンサーとさせていただきます。
ありがとうございました。
そりゃまあ、
jQuery(d_activeTab).slideDown();
jQuery(".tab_drawer_heading").not($(d_activeTab).slideUp());
とダウンした直後にアップするように書いてありますから、そのようになると思いますよ。
ああ、解決したんですね。それはよかった。
あなたの回答
tips
プレビュー
