1

私はJquery/javascriptが初めてで、+/-ボタンを使用して展開および折りたたみ可能なリストに整理する必要があるリンクのレベルがたくさんあります。

私が扱っている情報の例は次のとおりです。

Category1 (Level 1)
- Subcategory 1 (Level 2)
- Subcategory 2
- Subcategory 3
Category2 (Level 1)
- Subcategory 1 (Level 2)
- Subcategory 2
- Subcategory 3
Category3 (Level 1)
- Subcategory 1 (Level 2)
----Subcategory 1 (Level 3)
- Subcategory 2
- Subcategory 3

コード的には、次のようになります。

<div class="navCol">
<h4>Pet Club</h4>
<ul>
    <li><a href="/pc/home">Pet Home</a></li>
    <li><a href="/pc/articles">Arts</a></li>
    <li><a href="/pc/coupons">ns</a></li>
    <li><a href="/pc/pet-prescriptions">Pet Prescrions</a></li>
</ul>
</div>
<div class="navCol">
<h4>Fresh Ideas</h4>
<ul>
    <li><a href="/fi/cooking-guide">Know Yur Food</a></li>
    <li><a href="/fi/departments">Depaments</a></li>
    <li><a href="/fi/gluten-free">Free</a></li>
    <li><a href="/fi/house-of-bbq">HoBQ</a></li>
    <li><a href="/fi/how-to-shop">rt</a></li>
    <li><a href="/fi/kids-cooking-club">Kidsb</a></li>
    <li><a href="/fi/price-chopper-products">Tr</a></li>
</ul>
</div>
<div class="navCol">
<h4>vings</h4>
<ul>
    <li><a href="/vings/advantedge-card">w</a></li>
    <li><a href="/vings/baby-club">Bb</a></li>
    <li><a href="/vings/blue-rhino">asdf</a></li>
    <li><a href="/vings/grocery-apps">On </a></li>
    <li><a href="/vings/grocery-coupons">C</a></li>
    <li><a href="/vings/grocery-offers">Em</a></li>
    <li><a href="/vings/grocery-sweepstakes">P</a></li>
    <li><a href="/vings/meal-deals">W</a></li>
    <li><a href="/vings/pc">Pet</a></li>
    <li><a href="/vings/price-chopper-fuel-advantedge">Fuel</a></li>
    <li><a href="/vings/school-vings-program">School</a></li>
    <li><a href="/vings/weekly-flyer">Weekly</a></li>
</ul>
</div>

カテゴリ +- をクリックできるようにしたいのですが、その下にあるすべてのリンクを表示/非表示にします。3 番目のレベルを扱っているカテゴリ 3 のサブカテゴリ 1 と同じです。レベル 3 まで実装するにはどうすればよいですか?

すべてのリンクの前に L1、L2、L3 タグを付ける必要がありますか? +/- 記号と実装に関するいくつかの質問を見てきましたが、多くのことを理解していません。

また、トグルですべてを表示またはすべて展開するボタンを実装するにはどうすればよいですか? つまり、最も深いレベルまで展開し、折りたたんでレベル 1 のカテゴリのみを表示します。

これを自分で学び始めることができる場所があれば、それも大歓迎です。これは私の最初のプロジェクトであり、どこから始めればよいか混乱しています。

4

3 に答える 3

1

HTML 構造について考えるところから始めたいと思うでしょう。リストを表現するには、ある種のネストされた要素が必要です。<ul>データ構造を意味的に表すため、ネストされた要素を使用することをお勧めします。

いくつのレベルがあるか心配する必要はありません。正しく行えば、同じコードがどのレベルの折りたたみ可能な要素でも機能します。

ツリー要素がいつクリックされたかを知ること、その子を見つけること、およびそれらの可視性を切り替えることです。

jQuery の.click()ハンドラーを使用して、要素がクリックされたタイミングを判断できます。ただし、注意してください。たとえば、ネストされた<li>要素があり$('li').click、イベントとして使用する場合、サブ要素の複数のクリックをキャッチします (親のclickイベントもトリガーするため)。そのため、セレクターを少し賢くする必要があります。

クリックを検出できたら、jQuery の.children()関数を使用してサブアイテムを見つけることができます。

最後に、子要素の可視性を簡単に切り替えることができます。これは、jQuery の.toggle()関数を使用して簡単に行うことができます。

最後に、私は Josh のコメントの感情に同意します: なぜ車輪を再発明するのですか? 学ぶためにやっているのであれば、それは素晴らしいことです。この回答で概説したアプローチを使用できます。必要なだけの場合は、Josh のAccordionやjQuery Treeviewの提案など、既存の jQuery 拡張機能の使用を検討する必要があります。

于 2012-09-06T20:19:10.263 に答える
1

通常、jQuery を使用する前に JavaScript を完全に理解することをお勧めしますが、ここでは後者の方がはるかに簡単なソリューションを提供します。

.toggle()を見てください

編集: Josh の提案は素晴らしいものですが、より単純なバージョンを事前に構築することを理解する価値があるかもしれません。

于 2012-09-06T19:53:00.393 に答える
0

これは非常に単純な例ですhttp://jsfiddle.net/xNh6R/4/

Javascript:

$('.level1').click(function(){
    if($(this).next('div').is(':visible')){
        $(this).next('div').hide("blind");
    } else {
        $(this).next('div').show("blind");
    }
});

$('.level2').click(function(){
    if($(this).next('div').is(':visible') && $(this).next('div').hasClass("level3")){
        $(this).next('div').hide("blind");
    } else if($(this).next('div').hasClass("level3")) {
        $(this).next('div').show("blind");
    }
});​
于 2012-09-06T20:59:31.630 に答える