0

我有一个这样的菜单：

品牌1

  • 意甲 1
  • 意甲 2
  • 意甲 3

品牌 2

  • 意甲 1
  • 意甲 2
  • 意甲 3

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

因此，所有品牌的 div 都具有相同的名称
，如果我单击品牌名称 1，那么 jquery 是否有可能在品牌 div 下的 div caterie 中的所有内容都会切换。
所以如果我点击一个品牌名称，一切都会在一开始就关闭，它会显示该品牌的系列，而不是所有品牌的所有系列。
我希望你能理解我的弱英语。 

<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();

  });
});

一种方法是添加另一个类，例如隐藏。在您的类别上开设更多课程会有所帮助

贝特

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

您还可以为“过滤”添加一个类，以及一个隐藏 jQuery“隐藏”的内容

活动内容：

<div class="category catserie filtered">

隐藏内容

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

看起来您想在单击类别时显示/隐藏类别。您可以使用 jqueryui 手风琴执行此操作，如下所示：

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

例如http://jsfiddle.net/y6Rj8/

注意，我必须包括 jquery、jqueryui，并且我还必须调整 css 来设置类别 div 的宽度。

于 2013-03-08T13:44:59.273 回答
0

你所拥有的东西又短又脏

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

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

演示：小提琴

于 2013-03-08T13:52:31.313 回答