Question

我有一个类似这样的菜单：

品牌1

Serie 1
Serie 2
Serie 3

品牌2

Serie 1
Serie 2
Serie 3

该品牌位于名为catmerk的div中在该div下是另一个div，系列名为divserie

所以所有品牌的人都有相同的名字是否可以使用jquery如果我点击brandname 1，div seseret下的所有东西都会在品牌div下切换所以如果我点击一个品牌名称就会显示该品牌的系列，所以一切都在一开始就关闭所以不是所有品牌的所有系列我希望你能理解我的弱英语。

<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>

Answer 1

Fisrt你的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();

  });
});

一种方法是添加另一个类，例如hide。在您的类别上增加课程将有所帮助

贝蒂

因此您可以在jQuery中使用选择器“.category”，例如$（“。category”）选择所有类别。

你可以为“过滤”添加一个类，并用jQuery隐藏“隐藏”的内容

有效内容：

<div class="category catserie filtered">

隐藏内容

<div class="category catmerk hidden">

Answer 2

您希望在点击时显示/隐藏类别。您可以使用jqueryui手风琴执行此操作，如下所示：

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

e.g。 http://jsfiddle.net/y6Rj8/

注意，我不得不使用jquery，jqueryui，我还必须调整css来设置类别div的宽度。

Answer 3

简短而肮脏的你拥有的东西

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

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

演示：Fiddle

显示具有相同名称的隐藏div

3 个答案: