Question

我有5个catagories（cat 1，cat 2，cat3 .....）并且我想要显示所有类别，当我点击导航项目时，所有其他类别都被关闭，只有显示选定的一个，就像手风琴一样，当我取消选择导航项时，所有类别都会再次获得执行。

HTML

<div id="main-column-4082" class="mod_article block">
<div class="download_nav">
    <ul>
        <li class="nav_cat1">Cat 1</li>
        <li class="nav_cat2">Cat 2</li>
        <li class="nav_cat3">Cat 3</li>
        <li class="nav_cat4">Cat 4</li>
        <li class="nav_cat5">Cat 5</li>
    </ul>
    </div>
    <div class="clear"></div>
<div class="ce_text ce_downloads cat1 block">
    <h3>Cat 1</h3>
    <ul>
        <li>Test Item</li>
        <li>Test Item</li>
        <li>Test Item</li>
    </ul>
    </div>
<div class="ce_text ce_downloads cat2 block">
    <h3>Cat 2</h3>
    <ul>
        <li>Test Item</li>
        <li>Test Item</li>
        <li>Test Item</li>
    </ul>
    </div>
<div class="ce_text ce_downloads cat3 block">
    <h3>Cat 3</h3>
    <ul>
        <li>Test Item</li>
        <li>Test Item</li>
        <li>Test Item</li>
    </ul>
    </div>
<div class="ce_text ce_downloads cat4 block">
    <h3>Cat 4</h3>
    <ul>
        <li>Test Item</li>
        <li>Test Item</li>
        <li>Test Item</li>
    </ul>
    </div>
<div class="ce_text ce_downloads cat5 block">
    <h3>Cat 5</h3>
    <ul>
        <li>Test Item</li>
        <li>Test Item</li>
        <li>Test Item</li>
    </ul>
    </div>
</div>

小提琴

http://jsfiddle.net/Fz33q/5/

你能帮我解决这个问题吗？

Answer 1

请点击此处查看

<强> LIVE DEMO

$(document).ready(function() {
var $topLevelItems = $("inhalte");

    $("#nav_cat1").click(function(){

    $(".cat2").slideUp(300);
    $(".cat3").slideUp(300);
    $(".cat4").slideUp(300);
        $('#nav_cat2').css('color','black');
        $('#nav_cat3').css('color','black');
        $('#nav_cat4').css('color','black');
    $('#nav_cat1').css('color','red');
    $(".cat1").delay(400).slideDown(300);

  });
  $("#nav_cat2").click(function(){

    $(".cat1").slideUp(300);
    $(".cat3").slideUp(300);
    $(".cat4").slideUp(300);
    $('#nav_cat1').css('color','black');
        $('#nav_cat3').css('color','black');
        $('#nav_cat4').css('color','black');
    $('#nav_cat2').css('color','red');
     $(".cat2").delay(400).slideDown(300);
  });
  $("#nav_cat3").click(function(){

    $(".cat1").slideUp(300);
    $(".cat2").slideUp(300);
    $(".cat4").slideUp(300);
    $('#nav_cat1').css('color','black');
        $('#nav_cat2').css('color','black');
        $('#nav_cat4').css('color','black');
    $('#nav_cat3').css('color','red');
    $(".cat3").delay(400).slideDown(300);
  });

  $("#nav_cat4").click(function(){


     $(".cat1").slideUp(300);
    $(".cat2").slideUp(300);
    $(".cat3").slideUp(300);
    $('#nav_cat1').css('color','black');
        $('#nav_cat2').css('color','black');
        $('#nav_cat3').css('color','black');
    $('#nav_cat4').css('color','red');
      $(".cat4").delay(400).slideDown(300);
  });


});

希望这能帮到你！

通过导航打开和关闭手风琴

HTML

小提琴

1 个答案: