0

私はこのようなメニューを持っています：

ブランド 1

  • セリエ1
  • セリエ 2
  • セリエ 3

ブランド 2

  • セリエ1
  • セリエ 2
  • セリエ 3

ブランドは、その div の下の catmerk と呼ばれる div にあり、divserie と呼ばれるシリーズの別の div です。

ブランドを持つすべての thediv は同じ名前を持っているので
、ブランド div の下の div caterie のすべてがトグルするブランド名 1 をクリックすると、jquery で可能です。
ブランド名をクリックすると、最初はすべてが閉じられ、そのブランドのシリーズが表示されるため、すべてのブランドのすべてのシリーズではありません。
私の弱い英語を理解していただければ幸いです。 

<div id="categorie"><!-- een lijst met categorien -->    
    <div id="catmerk"><a href="#">Brand 1</a><br></div>  
    <div id="catserie">  Serienam1<br>
        Seriename2
        seriename 3
        seriename 4
    </div>
    <div id="catmerk"><a href="#">Brand 2</a><br></div>
    <div id="catserie">  Serienam1<br>
        Seriename2
        seriename 3
        seriename 4
    </div> 
</div>
4

3 に答える 3

2

まず、HTML にコードの問題があります。ID は一意である必要がありますが、クラスは繰り返すことができます。

カテゴリの html は次のようになります。

<div id="categorie">

<!-- een lijst met categorien -->
    <div class="catmerk">
        <a href="merk.php?id=26">Bette</a><br>
    </div>
    <div class="catserie">
        <a href="serie.php?id=24"> Bowl</a><br>
        <a href="serie.php?id=25">Aqua</a><br>
        <a href="serie.php?id=46"> Home</a><br>
        <a href="serie.php?id=62"> K.forty</a><br>
    </div>
    <div class="catmerk">
        <a href="merk.php?id=5">Bruynzeel</a><br>
    </div>
    <div class="catserie">
        <a href="serie.php?id=9"> Faro</a><br>
    </div>
    <div class="catmerk">
        <a href="merk.php?id=27">Burgbad</a><br>
    </div>
    <div class="catserie">
        <a href="serie.php?id=27"> Bel</a><br>
        <a href="serie.php?id=58"> Crono</a><br>
    </div>
    <div class="catmerk">
        <a href="merk.php?id=19">Cleopatra</a><br>
    </div>
    <div class="catserie">
        <a href="serie.php?id=11"> Premium Line</a><br>
    </div>
    <div class="catmerk">
        <a href="merk.php?id=28">Clou</a><br>
    </div>
    <div class="catserie">
        <a href="serie.php?id=26"> First</a><br>
    </div>

JavaScriptの部分では、ここに例を示します。これはまさにあなたが達成したいことではありませんが、少なくともアプローチのアイデアを提供します:

$(document).ready(function() {
  // here the id
  $("#catserie").on("click", function(event){
    // add here any action you need.

     all div here will hide    
     $("#categorie div").hide();

     // here all elements with class .catserie will show
     $(".catserie").show();

  });
});

1 つの方法は、hide などの別のクラスを追加することです。カテゴリのクラスを増やすと役立ちます

ベット

$(".category") のように jQuery でセレクター ".category" を使用して、すべてのカテゴリを選択できます。

「フィルター処理済み」のクラスと、jQuery によって「非表示」のコンテンツを非表示にするクラスも追加できます。

アクティブ コンテンツ:

<div class="category catserie filtered">

隠しコンテンツ

<div class="category catmerk hidden">
于 2013-03-08T13:49:32.757 に答える
0

あなたが持っているもので短くて汚い

$(function(){
    $('div#catserie').hide();

    $('#categorie').on('click', '#catmerk', function(){
        $('div#catserie').hide();
        $(this).next().show();
    });
})

デモ:フィドル

于 2013-03-08T13:52:31.313 に答える
0

クリックしたときにカテゴリを表示/非表示にしたいようです。次のようにjqueryuiアコーディオンでこれを行うことができます：

$("#categorie").accordion();

例http://jsfiddle.net/y6Rj8/

注意してください、jquery、jqueryui を含める必要があり、css を調整してカテゴリ div の幅を設定する必要もありました。

于 2013-03-08T13:44:59.273 に答える