1

ナビゲーションの各リストアイテムをクリック可能にするサイドナビゲーションがあります。これにより、そのセクションのオプションの切り替えが開始されます。

これまでのところ、私が話していることを実証するために、大まかなコードをいじくりまわしています。赤い列は、最初の列の各リンクによってトリガーされる切り替えられたセクションになります。しかし、私の主な問題は、これを効率的に達成するための最良の方法です。明らかに7つのリンクがあります。つまり、7つのトグルが必要になります。

JSフィドル： http： //jsfiddle.net/visualdecree/Be6ry/31/ *編集-すべての7つのリンクに、さまざまなオプションで切り替える個別のdivが必要です。

7つの異なるトリガーによって切り替えられる7つの非表示のdivがありますか？

これに関する助けをいただければ幸いです。

4

2 に答える 2

2

この更新されたフィドル、 http：//jsfiddle.net/Be6ry/21/をチェックしてください。

適切なセレクターを使用してそれらを探し、ハンドラーをクリックイベントに一度アタッチするだけです。

$(".sidenav li a").click(function(){
    alert("you have clicked on "+$(this).text());
});​

解決策を明確にする

1-$(".sidenav li a")

このセレクターは、liリスト内のすべてのアンカーを検索し、それらへの参照を保持します。

2-2-.click(function(){}

これにより、前のセレクターが参照を保持していたすべてのDOM要素のクリックイベントにハンドラーがアタッチされます。

3-3- alert("you have clicked on "+$(this).text());

実行するアクションのサンプルです。ここで、好きなことを実行してください。

ここで7つの異なるハンドラーを使用する必要はありません:)

于 2012-09-05T11:26:30.023 に答える
1

jQuery：

$(".sn a").on('click',function(){
    var panID = $("#" + $(this).data('panel') );
    $("div[id*='sn-pan-']").hide({slide:'toggle'}, 1000);
    $(panID).css("left","100px").animate({width:'toggle'}, 500)
})​;

サイドナビゲーションHTML：

<ul class="sidenav">
    <li class="sn"><a href="#" data-panel="sn-pan-1">Lorem</a></li>
    <li class="sn"><a href="#" data-panel="sn-pan-2">Ipsum</a></li>
    <li class="sn"><a href="#" data-panel="sn-pan-3">Dolar</a></li>
    <li class="sn"><a href="#" data-panel="sn-pan-4">Sit</a></li>
    <li class="sn"><a href="#" data-panel="sn-pan-5">Amet</a></li>
    <li class="sn"><a href="#" data-panel="sn-pan-6">Et</a></li>
    <li class="sn"><a href="#" data-panel="sn-pan-7">Donut</a></li>
 </ul>

サイドナビゲーションパネルのHTML：

 <!-- hidden panel that slides out? -->
 <div id="sn-pan-1">
     <ul>
         <li>Stuff 1</li>
         <li>Here</li>
     </ul>
  </div>
 <div id="sn-pan-2">
     <ul>
         <li>Stuff 1</li>
         <li>Here</li>
     </ul>
  </div>
  ...
  ...
  <div id="sn-pan-7">
     <ul>
         <li>Stuff 7</li>
         <li>Here</li>
     </ul>
  </div>

CSS：

.sn a {
    width: 100%;
    display: block;
    overflow: hidden;
    padding: 10px 0;
    border-bottom: 1px solid #
}

div[id*="sn-pan-"]{
    float: left;
    background: red;
    width: 100px;
    height: 100%;
    position: absolute;
    left: 0px;
    top: 0;
    display: none;
}

デモを見る

于 2012-09-05T11:37:18.260 に答える