0

現在、サイト ナビゲーションのアコーディオン メニューとして機能する標準の順序付けられていないリストがあります (ここに私のマークアップの全文があります)。これから使用する新機能 (css 3d 変換) をサポートするブラウザーに、より強化されたナビゲーションを提供したいと考えています。これが機能するには、次の出力と一致するようにコードの構造を少し修正する必要があります (つまり、要素を構造に追加/複製します)。

<!-- mp-menu -->
<nav id="mp-menu" class="mp-menu">
<div class="mp-level"> <!--NEW APPENDED ELEMENT-->
    <ul id="demo1" class="nav">
        <li>
            <a href="#">Devices</a>
            <div class="mp-level">
                <h2>Devices</h2> <!--NEW CLONED ELEMENT-->
                <a class="mp-back" href="#">back</a> <!--NEW APPENDED ELEMENT-->
                <ul>
                    <li><a href="#">Mobile Phones</a></li>
                    <li><a href="#">Televisions</a></li>
                    <li><a href="#">Cameras</a></li>
                </ul>
            </div>
        </li>
        <li>
            <a href="#">Magazines</a>
            <div class="mp-level">
                <h2>Magazines</h2> <!--NEW CLONED ELEMENT-->
                <a class="mp-back" href="#">back</a> <!--NEW APPENDED ELEMENT-->
                <ul>
                    <li><a href="#">National Geographic</a></li>
                    <li><a href="#">Scientific American</a></li>
                </ul>
            </div>
        </li>
</ul>
</div>
</nav>

可能であれば新しい要素を追加したいのですが、これは正しく機能していないようです:

$( "#mp-menu" ).append('<div class="mp-level">');

レベル 1 のリンクを H2 に複製するために、試みましたがうまくいきませんでした:

$( "#mp-menu ul li .mp-level" ).clone('<h2>Devices</h2>');
4

1 に答える 1

1

.append()は、文字列の断片を dom 構造に追加するだけの文字列連結とは異なります。

最初の部分では、.wrapInner()を使用できます

$('#mp-menu').wrapInner('<div class="mp-level" />');

2 番目の部分では、以下の.prepend()を使用します

$( "#mp-menu ul li .mp-level" ).prepend(function(){
    return '<h2>' + $(this).prev().text()+ '</h2> <a class="mp-back" href="#">back</a>';
})

デモ:フィドル

于 2013-10-23T10:07:40.720 に答える