サポート » 使い方全般 » アコーディオンメニューの特定部分にclassを付けたい

  • umikurasu

    (@umikurasu)


    初めてご質問させていただきます。
    wordpress初心者です。いろいろと検索をしてみましたが、該当する回答
    が見当たりませんので、どなたかご教授ください。

    まず、サイドバーにアコーディオンメニューを設置したのですが、
    構造は以下の通りです。

    ・A(親)
     ・A-1(子)・・・孫が存在しない子
     ・A-2(子)
      ・A-2-1(孫)
      ・A-2-2(孫)
     ・A-3(子)
      ・A-3-1(孫)
      ・A-3-2(孫)

    各ページには、その親に属する子・孫のメニューが表示されるようになります。

    そこで、jqueryの子メニューにclassを付け、子をクリックすると孫メニューがでる
    アコーディオンを設置しました。

    ————————————————
    ▼sidebar.php
    ————————————————
    <ul class=”acc”>
    <?php
    if(is_page()){
    $parent = array_reverse($post->ancestors);
    if($parent) :
    $pages = $parent[0];

    else :
    $pages = $post->ID;
    endif;
    }
    if($pages){
    wp_list_pages(‘echo=1&title_li=&child_of=’. $pages);

    }
    else{
    }
    ?>

    ————————————————
    ▼header.php
    ————————————————
    <script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js”></script&gt;
    <script type=”text/javascript” src=”ddaccordion.js” />
    /***********************************************
    * Accordion Content script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
    * This notice must stay intact for legal use
    ***********************************************/
    </script>
    <script type=”text/javascript”>
    $(function() {
    $(“.acc a”).addClass(“open”);
    $(“.acc .children a”).removeClass(“open”);

    });
    </script>

    <script type=”text/javascript”>
    ddaccordion.init({
    headerclass: “open”,
    contentclass: “children”,
    revealtype: “click”,
    mouseoverdelay: 200,
    collapseprev: false,
    defaultexpanded: [],
    onemustopen: false,
    animatedefault: false,
    persiststate: true,
    toggleclass: [“”, “”],
    togglehtml: [“suffix”, “”, “”],
    animatespeed: “slow”,
    oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
    //do nothing
    },
    onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
    //do nothing
    }
    })
    </script>

    ————————————————
    ▼HTML
    ————————————————

    <ul class="acc">
    <li class="page_item page-item-173"><a href="?page_id=173">A-1/a>
    <ul class='children'>
    	<li class="page_item page-item-150"></a><a href="?page_id=150">A-1-1</a>
    	<li class="page_item page-item-153"><a href="?page_id=153">A-1-2</a>
    	<li class="page_item page-item-156"><a href="?page_id=156">A-1-3</a>
    
    <li class="page_item page-item-402"><a href="?page_id=402">A-2</a>
    <li class="page_item page-item-408"><a href="?page_id=408">A-3</a>
    <ul class='children'>
    	<li class="page_item page-item-160"><a href="?page_id=160">A-3-1</a>

    上記の内容で、設置したところ、当然「孫」を持たない「子」にもclassがついて
    しまって、その子メニューからのリンクが効きません。

    そこで、ul class=”children”(=孫メニュー)を持つ
    メニューのみにclassを付けようと、
    hasclass()を使って以下の内容に書き換えてみましたが、
    以下の命令について、まったく反応してくれません。

    ———————————————-
    ▼header.php 
    ———————————————-

    <script type=”text/javascript”>
    $(function() {
    $(“li a”).each(function(i, item){
    if ($(item).children().hasClass(“children”)) {
    $(item).addclass(“open”);
    }
    });
    });
    </script>

    私の知識不足で、こちらのフォーラムに初歩的な質問でお世話になりますが、
    何卒よろしくお願い申し上げます。

11件の返信を表示中 - 1 - 11件目 (全11件中)
  • nobita

    (@nobita)

    こんにちは
    ご参考まで
    http://ja.forums.wordpress.org/topic/8153?replies=4

    トピック投稿者 umikurasu

    (@umikurasu)

    nobita様、ありがとうございます。

    ご紹介いただいたURL、以前拝見して試したところ、
    そのときは動作しなかったのですが、今回はきちんと動作しました!

    恐らくいろいろ試しすぎて、コードにミスがあったのだと思います。

    すごく助かりました。
    初歩的なことですが、ご返信いただきありがとうございました。
    今後ともよろしくお願い申し上げます。

    トピック投稿者 umikurasu

    (@umikurasu)

    たびたびすみません・・・
    こちらの確認不足でした。

    nobita様にご指導いただいた内容で、孫を持たない子については
    クリックすると直接リンクするようになったのですが、
    孫を持つ子をクリックするとアコーディオンメニューが表示され、
    その孫をクリックすると、リンクが効かなくなりアコーディオンが
    閉じてしまいます。

    下のように書きました。
    <script type=”text/javascript”>
    jQuery(function() {
    jQuery(“.page_item”).has(“.children”).addClass(“open”);
    });
    </script>

    ul.children内のliにもopenのclassがついてしまうのでしょうか?

    原因がわかりませんので、恐れ入りますがご指導ください。

    よろしくお願い申し上げます。

    nobita

    (@nobita)

    umikurasuさん こんにちは

    あの、質問の時の HTML は ソースをコピーしたものですか ?

    ワードプレスで、そのコードを生成するために使った テンプレート関数なども含めて 教えてください

    トピック投稿者 umikurasu

    (@umikurasu)

    nobita様、こんにちは。お世話になります。
    お返事が遅くなり申し訳ございません。

    初回に質問した際のHTML、やり方がわからなくて、
    かなりコードが崩れてましたね。(すみません)

    ▼実際に公開された(生成された)ページのソースをコピーしております。

    <ul class="acc">
    
    <!--▼孫を持つ子-->
    <li class="page_item page-item-546"><a href="#">A-1</a>
    <ul class='children'>
    	<li class="page_item page-item-14"><a href="#">A-1-1</a></li>
    	<li class="page_item page-item-70"><a href="#">A-1-2</a></li>
    </ul>
    </li>
    
    <!--▼孫を持つ子-->
    <li class="page_item page-item-30"><a href="#">A-2</a>
    <ul class='children'>
    	<li class="page_item page-item-555"><a href="#">A-2-1</a></li>
    	<li class="page_item page-item-34"><a href="#">A-2-2</a></li>
    	<li class="page_item page-item-44"><a href="#">A-2-3</a></li>
    </ul>
    </li>
    
    <!--▼孫を持たない子-->
    <li class="page_item page-item-411"><a href="#">A-3</a></li>
    
    <!--▼孫を持つ子-->
    <li class="page_item page-item-72"><a href="#">A-4</a>
    <ul class='children'>
    	<li class="page_item page-item-80"><a href="#">A-4-1</a></li>
    	<li class="page_item page-item-77"><a href="#">A-4-2</a></li>
    </ul>
    </li>
    
    </ul>

    コードを生成するために使ったテンプレート関数・・・
    サイドバーに固定ページの一覧を取得するために以下を入れました。

    <ul class="acc">
    <?php
    if(is_page()){
    $parent = array_reverse($post->ancestors);
    if($parent) :
    $pages = $parent[0];
    else :
    $pages = $post->ID;
    endif;
    }
    if($pages){
    wp_list_pages('echo=1&title_li=&child_of='. $pages);
    }
    else{
    }
    ?>

    その他、header.phpにjqueryのコードを入れました。
    function.phpへは何も追加しておりません。

    他にも必要な情報がありますでしょうか?

    よろしくお願い申し上げます。

    nobita

    (@nobita)

    umikurasuさん こんにちは

    li エレメントにクラスを追加するのは、これまでのやり方で大丈夫だと思います。
    .childrenには、.openは追加されないと思います。

    ただumikurasuさんがやりたい事を想像して、短いコードを書いてみました。

    http://jsfiddle.net/rCBs2/

    見当違いなら、ごめんなさい

    トピック投稿者 umikurasu

    (@umikurasu)

    nobita様、お世話になります。

    とってもご丁寧な返信、本当にありがとうございました。

    早速、ご指導いただいたコードを拝見させていただきました。

    この内容で、A-1をクリックするとアコーディオンの開閉はもちろん、
    それと同時に
    A-1に指定された「href=”?page_id=XX”」ページへリンクさせたいのです。
    ※A-1ページにもコンテンツが存在しますので、
     アコーディオンの開閉とリンク、2つの処理をさせるようしなければなりません。

    サブメニューが存在しない場合のリンク(A-3)については
    拝見した内容で大丈夫です。

    大変、お手間をおかけいたしますが、何卒よろしくお願い申し上げます。

    nobita

    (@nobita)

    こんにちは、

    この内容で、A-1をクリックするとアコーディオンの開閉はもちろん、
    それと同時に
    A-1に指定された「href=”?page_id=XX”」ページへリンクさせたいのです。

    やりたい事は、理解できました

    href=”?page_id=XX”は、WEBサーバに対するhttpリクエストです。
    私が書いたのは、クライアントサイドのDOM操作です。この操作は、表示しているドキュメントの中だけで動作するものです。

    基本は、新しいリクエストを送って、新しいhtmlが表示される時に、その操作は維持されないのです。

    クリックしたら、開くというアクションではなく、

    もし、?page_id=XXというhttpリクエストがあったら、隣接するULエレメントを表示するという処理をPHPか、javascriptで書くという事になると思います。

    トピック投稿者 umikurasu

    (@umikurasu)

    nobita様、ご返信ありがとうございます。

    今回ご指導いただいた以下の内容については
    私の知識不足で理解できず、解決しそうもありません。

    >クリックしたら、開くというアクションではなく、
    >もし、?page_id=XXというhttpリクエストがあったら、
    >隣接するULエレメントを表示する>という処理をPHPか、
    >javascriptで書くという事になると思います。

    何度もお手間をかけて申し訳ございません・・・

    もしも、まだお付き合いしていただけるのであれば、
    ご教授ねがえますか?

    よろしくお願い申し上げます。

    nobita

    (@nobita)

    umikurasuさん

    簡単に、解決しそうもないなんて 思っちゃだめですよ:)

    例えば、こんな雰囲気

    <!doctype html>
    <head>
        <meta charset=utf-8>
        <title>即席 html5</title>
        <!--[if IE]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
        </script>
        <![endif]-->
        <link rel="stylesheet" href="http://html5resetcss.googlecode.com/files/html5-reset-1.4.css" media="all">
        <!--Include YUI Loader: -->
        <script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/yuiloader/yuiloader-min.js">
        </script>
        <!--Use YUI Loader to bring in your other dependencies: -->
        <script type="text/javascript">
    
        // Instantiate and configure YUI Loader:
        (function() {
            var loader = new YAHOO.util.YUILoader({
                base: "",
                require: ["base","fonts","grids","reset"],
                loadOptional: false,
                combine: true,
                filter: "MIN",
                allowRollup: true,
                onSuccess: function() {
                }
            });
        loader.insert();
        })();
        </script>
        <script type="text/javascript" src="http://www.google.com/jsapi">
        </script>
        <script type="text/javascript">google.load("jquery", "1.6.2");
        </script>
        <script type="text/javascript">
    
        	jQuery(function() {
    
             /*  jQuery(".page_item").has(".children").children("a").addClass("open").removeAttr("href");
    		   jQuery(".open").click(function () {
      				jQuery(this).siblings('ul').toggle();
    			});*/
    			jQuery(".page_item").has(".children").children("a").siblings('ul').hide();
    			<?php if(isset($_GET['page_id'])){ $my_id = (int) $_GET['page_id'];?>
    			jQuery(".page-item-<?php echo $my_id;?>").children().show();
    			<?php }?>
            });
        </script>
    </head>
    <body>
        <header class="bar">
            <h1 class="fancy">Toggle Action</h1>
        </header>
        <div id="doc2" class="yui-t5">
            <section id="yui-main">
                <article class="yui-b">
                    <h2>instant html5</h2>
                    <ul class="acc">
                        <li class="page_item page-item-546">
                            <a href="?page_id=546">A-1</a>
                            <ul class='children'>
                                <li class="page_item page-item-14">
                                    <a href="#">A-1-1</a>
                                </li>
                                <li class="page_item page-item-70">
                                    <a href="#">A-1-2</a>
                                </li>
                            </ul>
                        </li>
                        <li class="page_item page-item-30">
                            <a href="?page_id=30">A-2</a>
                            <ul class='children'>
                                <li class="page_item page-item-555">
                                    <a href="#">A-2-1</a>
                                </li>
                                <li class="page_item page-item-34">
                                    <a href="#">A-2-2</a>
                                </li>
                                <li class="page_item page-item-44">
                                    <a href="#">A-2-3</a>
                                </li>
                            </ul>
                        </li>
                        <li class="page_item page-item-411">
                            <a href="?page_id=411">A-3</a>
                        </li>
                        <li class="page_item page-item-72">
                            <a href="?page_id=72">A-4</a>
                            <ul class='children'>
                                <li class="page_item page-item-80">
                                    <a href="#">A-4-1</a>
                                </li>
                                <li class="page_item page-item-77">
                                    <a href="#">A-4-2</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </article>
            </section>
            <nav class="yui-b" id="toc">
                column
            </nav>
            <br style="clear:both;" />
        </div>
        <footer class="bar">
            <address>has_child.php</address>
        </footer>
    </body>
    </html>

    考え方としては、jQueryで.childrenを隠してしまって、ページをリクエストした時に、PHPで、page_id=××というクエリがあるときだけ、そのクエリに応じた.childrenを表示するjQueryのスクリプトを追加してあげるというものです。

    $_GET[‘page_id’]の処理なんかは、ワードプレスのエスケープ関数などを使って、キチンと処理して使ってくださいね。
    jQueryの書き方も、もっといい書き方が多分あるので、研究してみてくださいね

    nobita

    (@nobita)

    umikurasuさん

    返信をしたのですが、反映されていないようですので

    以下にサンプルを置いておきます

    http://tenman.info/study/jquery/page_menu/

    スクリプト部分は、PHPが混在していますので、この部分を差し替えてみてください

    <script type="text/javascript">
    
        	jQuery(function() {
    
             /*  jQuery(".page_item").has(".children").children("a").addClass("open").removeAttr("href");
    		   jQuery(".open").click(function () {
      				jQuery(this).siblings('ul').toggle();
    			});*/
    			jQuery(".page_item").has(".children").children("a").siblings('ul').hide();
    			<?php if(isset($_GET['page_id'])){ $my_id = (int) $_GET['page_id'];?>
    			jQuery(".page-item-<?php echo $my_id;?>").children().show();
    			<?php }?>
            });
        </script>
11件の返信を表示中 - 1 - 11件目 (全11件中)
  • トピック「アコーディオンメニューの特定部分にclassを付けたい」には新たに返信することはできません。