0

以下のようなリスト要素を使用したシンプルな垂直メニューがあります

<ul id="leftNav">
    <li id="home"><a href="/index.html">Home</a>
    </li>
    <li id="apples"><a href="/category/apples.html">Apples</a>

        <ul class="subMenu">
            <li><a href="/category/red-apples.html">Red Apples</a>
            </li>
            <li><a href="/category/green-apples.html">Green Apples</a> 
            </li>
            <li><a href="/category/golden-apples.html">Golden Apples</a>
            </li>
        </ul>
    </li>
    <li id="grapes"><a href="/category/grapes.html">Grapes</a>

        <ul class="subMenu">
            <li><a href="/category/red-grapes.html">Red Grapes</a>
            </li>
            <li><a href="/category/green-grapes.html">Green Grapes</a>
            </li>
            <li><a href="/category/black-grapes.html">Black Grapes</a>
            </li>
        </ul>
    </li>
    <li id="dry-fruits"><a href="/category/dry-fruits.html">Dry Fruits</a>

        <ul class="subMenu">
            <li id="subParent1"><a href="#">Fruits That Are Dried</a>

                <ul class="subMenu1">
                    <li><a href="/category/figs.html">Figs</a>
                    </li>
                    <li><a href="/category/dates.html">Dates</a>
                    </li>
                    <li><a href="/category/pineapples.html">Pine Apples</a>
                    </li>
                </ul>
            </li>
            <li id="subParent2"><a href="#">Nuts and Seeds</a>

                <ul class="subMenu1">
                    <li><a href="/category/chestnuts.html">Chestnuts</a>
                    </li>
                    <li><a href="/category/almonds.html">Almonds</a>
                    </li>
                    <li><a href="/category/walnuts.html">Walnuts</a>
                    </li>
                </ul>
            </li>
            <li id="subParent3"><a href="/category/bananas.html">Bananas</a>
            </li>
        </ul>
    </li>
    <li id="sale" class="expanded"><a href="/category/sale.html">Sale</a>

</ul>

私がやろうとしているのは、リンゴまたはそのサブ項目がクリックされたときです。リストのセクションを展開したままにしようとしているので、ブドウまたはそのサブ項目をクリックすると、ブドウのセクションを除いて他のすべてを閉じる必要があります。

以下のようなコードを使用してみましたが、Apples と Grapes はそれぞれのページをレンダリングするリンクであるため、以下のコードは機能しません。

$(document).ready(function() {
    $("#apples .subMenu").css("display", "block");
});

ヘルプ、例、またはアドバイスをいただければ幸いです。

4

3 に答える 3

2 
  <script type="text/javascript">
      $(document).ready(function() {
         $("#apples > a").on('click',function(e){
            $('#apples .subMenu ').toggle();
            return false;
         });
      }); 
   </script>

http://jsfiddle.net/makedone/WRcBa/

于 2013-03-15T02:28:56.847 に答える
2

あなたは常にページをリロードします - そしてJavaScriptもリロードします。リクエスト間でメニューの状態を保存したい場合は、Cookie を使用してください。

または、ページをリロードしないバージョンを次に示します。その場合は、Ajax を使用する必要があります。

<script type="text/javascript">
$(document).ready(function() {

    $('#left-navigation a').click(function(){
     return false;
    });

    $(".parent-grapes > a, .parent-apples > a, .parent-dry-fruits > a").click(function () {
    var $block = $(this).parent().find(".sub-menu");
    $block.toggle();

    $.get($(this).attr('href'), function(data){
      $('#main-content').html($(data).find('#main-content').html());
    });
    return false;
    });
});
</script>

メニューには、この JavaScript (および JQuery) のみが必要です。

于 2013-03-15T23:47:33.613 に答える
0

これを試して。それは私のために働いた..

ありがとう！@レオ。

 <script type="text/javascript">
      $(document).ready(function() {
            hideAll();

             $("#leftNav li a").click( function(e) {
               try {

                  var pid = $(this).parent('li').attr("id");
                  //alert(pid);
                  if(pid == undefined) {

                  } else {
                    hideAll();
                    $("#" + pid + " .submenu").show();
                    e.preventDefault();
                  }

               } catch(e) {
                alert("oops!");
               }
            });
        }); 


        function hideAll() { 
             $(".subMenu").hide();
        }

  </script>
于 2013-03-15T02:39:47.610 に答える