0

FFで問題なく切り替わるリストがあります。実稼働に対応するには、この動作するIEが必要です。

（IE）jsを最初の#orderItemと最初の#familiyにのみ適用するようです。リスト内の残りの項目は無視されます。

どんな助けでも素晴らしいでしょう。

HTMLの一部（大きなリスト）：

<div class="classificationContainer">

        <ul class="classification" id="orderUL">

        <li id="orderItem" class="ordrheading">
            <div class="order">

                <a href="?nav=search_recherche&amp;lang=en">

  <img src="http://dev.ncr.ec.gc.ca/publications/bba-aob/images/node_closedc.gif" alt="By Classification" id="OrdListImage" />

                    Apodiformes (Swifts and Hummingbirds)
                </a>
            </div>

                    <ul class="classification" id="FamilyList">

                    <li id="familiy">
                        <div class="family">
                            <a href="?nav=search_recherche&amp;lang=en">


  <img src="http://dev.ncr.ec.gc.ca/publications/bba-aob/images/node_closedc.gif" alt="Family" id="FamListImage" />

                                Apodidae (Swifts)
                            </a>
                        </div>

                                <ul class="classification" id="SpiecesList">

                                <li>
                                    <img src="http://dev.ncr.ec.gc.ca/publications/bba-aob/images/node_leafc.gif" alt="Species" />
                                    <a href="?lang=en&amp;nav=bird_oiseaux&amp;aou=423"> Chimney Swift (Chaetura pelagica) </a>

                                </li>

                                </ul>

                    </li>

                    <li id="familiy">
                        <div class="family">
                            <a href="?nav=search_recherche&amp;lang=en">

  <img src="http://dev.ncr.ec.gc.ca/publications/bba-aob/images/node_closedc.gif" alt="Family" id="FamListImage" />

                                Trochilidae (Hummingbirds)
                            </a>

                        </div>

                                <ul class="classification" id="SpiecesList">

                                <li>
                                    <img src="http://dev.ncr.ec.gc.ca/publications/bba-aob/images/node_leafc.gif" alt="Species" />
                                    <a href="?lang=en&amp;nav=bird_oiseaux&amp;aou=428"> Ruby throated Hummingbird (Archilochus colubris) </a>
                                </li>

                                <li>
                                    <img src="http://dev.ncr.ec.gc.ca/publications/bba-aob/images/node_leafc.gif" alt="Species" />

                                    <a href="?lang=en&amp;nav=bird_oiseaux&amp;aou=433"> Rufous Hummingbird (Selasphorus rufus) </a>
                                </li>

                                </ul>

                    </li>

                    </ul>

        </li></ul></div>

私は次のjquery関数を持っています：

<script type="text/javascript">
    $(document).ready(function () {
    // toggle action for the order to familiy
    $("li#orderItem").click(function (event) {
        // toggle the image
        var src = ($("#OrdListImage", this).attr("src") == "/images/node_closedc.gif")
                ? "/images/node_openc.gif"
                : "/images/node_closedc.gif";
        $("img#OrdListImage", this).attr("src", src);

        //toggle the ul
        $('ul#FamilyList', this).toggle($('ul#FamilyList', this).css('display') == 'none');

        // stop all link actions
        return false;
    });

    //toggle action from familiy to speices
    $("li#familiy").click(function () {
        // toggle the image
        var src = ($("#FamListImage", this).attr("src") == "/images/node_closedc.gif")
                ? "/images/node_openc.gif"
                : "/images/node_closedc.gif";
        $("img#FamListImage", this).attr("src", src);            
        //toggle the ul
        $('ul#SpiecesList', this).toggle($('ul#SpiecesList', this).css('display') == 'none');

        // stop all link actions
        return false;
    });


});

4

2 に答える 2

1

また、IDが繰り返されていないかどうかを確認します（#orderItemが1つだけ、＃familiyが1つだけなど）。「id」属性はhtmlドキュメント内で一意である必要があり、「class」は繰り返すことができます。

于 2010-10-13T12:52:45.807 に答える
0

jQueryが提供するトグル機能は動作が保証されていません。これを読んだ場所の参照を失いました（jQueryのホームページにありました）。私は同じ問題に遭遇し、（jQueryによって提案されたように）独自のトグル関数を実装しました。あまり手間がかからず、解決策を提供できるので、これを試してみることをお勧めします。

于 2010-10-13T12:48:28.993 に答える