显示具有相同名称的隐藏div-Java 学习之路

我有一个菜单是这样的：

品牌1

意甲1
意甲2
意甲3

品牌2

意甲1
意甲2
意甲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>

3 回答

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

回复于 2024-05-07T17:47:06+08:00

0
看起来您想要在点击时显示/隐藏类别 . 您可以使用jqueryui手风琴执行此操作，如下所示：
```
$("#categorie").accordion();
```
例如http://jsfiddle.net/y6Rj8/

注意，我不得不使用jquery，jqueryui，我还必须调整css来设置categorie div的宽度 .
回复于 2024-05-07T17:47:06+08:00

你拥有的东西短而脏

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

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

演示：Fiddle

回复于 2024-05-07T17:47:06+08:00

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

3 回答

相关问题