0

私たちのウェブサイトにこのナビゲーション メニューがあります。これは、stackoverflow のコミュニティからすでに大きな支援を受けています。しかし、私はもう少し必要です。

現在、上部にあるショップ リンクをクリックすると、子要素であるジュエリーとビスポークが表示されます。

ただし、3 レベル下のネックレスをクリックすると、メニュー全体が非表示になります。

Ive は、3 番目の要素をダウンさせて、その親と祖父母を画面に表示したままにするためにさまざまな方法を試しましたが、うまくいきませんでした。

私が考えているのは、クリックされたアイテムが3番目または2番目のアイテムである場合、親と祖父母のインデックスを取得するjquery関数です。このようにして、このレベルのナビゲーションがユーザーに表示されたままになります。

<script>
$("#navigation ul li ul").hide();
$(".is-current").parent().parent().parent().siblings().show();
</script>

第 3 レベルのアイテムで is-current が識別されていますが、ユーザーが第 3 レベルのアイテムをクリックした場合にメニューがインデントされて表示されるように、親アイテムとすべてのサブアイテムとその兄弟を表示したいと考えています。上記のjqueryコードをjsフィドルで試してみました...しかし、jqueryの経験が比較的浅いため..これがどのように可能かを見つけるのに苦労しています。どんな提案でも大歓迎です

    <div id="navigation">
  <ul id="jsddm" class="dbtree">
    <li  id="SHOP"> <a href="...">SHOP</a>
      <ul>
        <li id="JEWELLERY"> <a href="...">JEWELLERY</a>
          <ul>
            <li id="NECKLACES" class="is-current"><a href="...">NECKLACES</a></li>
          </ul>
          <ul>
            <li id="RINGS"><a href="...">RINGS</a></li>
          </ul>
          <ul>
            <li id="EARRINGS"><a href="...">EARRINGS</a></li>
          </ul>
          <ul>
            <li id="FRIENDSHIP BRACELETS"><a href="...">FRIENDSHIP BRACELETS</a></li>
          </ul>
          <ul>
            <li id="CHARM BRACELETS"><a href="...">CHARM BRACELETS</a></li>
          </ul>
        </li>
      </ul>
      <ul>
        <li id="BESPOKE"><a href="...">BESPOKE</a>
          <ul>
            <li id="MAKE YOUR BESPOKE "><a href="...">MAKE YOUR BESPOKE</a></li>
          </ul>
          <ul>
            <li id="CHAINS"><a href="...">CHAINS</a></li>
          </ul>
          <ul>
            <li id="LETTERS"><a href="...">LETTERS</a></li>
          </ul>
          <ul>
            <li id="CRYSTALS"><a href="...">CRYSTALS</a></li>
          </ul>
          <ul>
            <li id="GEMSTONES"><a href="...">GEMSTONES</a></li>
          </ul>
          <ul>
            <li id="CHARMS"><a href="...">CHARMS</a></li>
          </ul>
          <ul>
            <li id="COLOURED CORD"><a href="...">COLOURED CORD</a></li>
          </ul>
        </li>
      </ul>
      <ul>
        <li id="KA FINES (coming soon)"><a href="...">KA FINES (coming soon)</a></li>
      </ul>
      <ul>
        <li id="GIFT VOUCHER"><a href="...">GIFT VOUCHER</a></li>
      </ul>
      <ul>
        <li id="MY DETAILS"><a href="...">MY DETAILS</a></li>
      </ul>
      <ul>
        <li id="MY HISTORY"><a href="...">MY HISTORY</a></li>
      </ul>
      <ul>
        <li id="LOGOUT"><a href="...">LOGOUT</a></li>
      </ul>
    </li>
  </ul>
  <ul>
    <li id="BESPOKE"> <a href="...">BESPOKE</a>
      <ul>
        <li id="ABOUT"><a href="...">ABOUT</a></li>
      </ul>
      <ul>
        <li id="LOOKBOOK "><a href="...">LOOKBOOK</a></li>
      </ul>
      <ul>
        <li id="MAKE YOUR BESPOKE"><a href="...">MAKE YOUR BESPOKE</a></li>
      </ul>
    </li>
  </ul>
  <ul>
    <li id="LOOKBOOK "><a href="...">LOOKBOOK</a>
      <ul>
        <li id="BESPOKE LOOKBOOK"><a href="...">BESPOKE LOOKBOOK</a></li>
      </ul>
      <ul>
        <li id="SOMETHING LIKE PARADISE"><a href="...">SOMETHING LIKE PARADISE</a></li>
      </ul>
    </li>
  </ul>
  <ul>
    <li id="OUR STORY"><a href="...">OUR STORY</a></li>
  </ul>
  <ul>
    <li id="PRESS"><a href="...">PRESS</a></li>
  </ul>
  <ul>
    <li id="BLOG"><a href="...">BLOG</a></li>
  </ul>
</div>
4

1 に答える 1

0

これはあなたが探しているものですか？ http://jsfiddle.net/D3fbC/

JavaScript:

$(function(){
    $('#navigation').find('a').click(function(e){
        e.preventDefault();
        $(this).parent('li').find('li').toggle();
    });
});
于 2013-03-24T23:21:45.110 に答える