Jquery手风琴类型功能一次只打开一个项目

Question

我有一个自定义设计的网格：

http://jsfiddle.net/97n4K/

当您单击一个网格项目时，该项目的内容 div 会滑动打开，当您再次单击它时它会关闭。这很好用。

我的问题是我只想像标准手风琴一样一次打开一个内容区域。

例如，我单击“内容一”-它打开“内容一”-现在，如果我单击“内容二”，我希望“内容一”关闭（向上滑动）并打开“内容二”（ slideDown）同时进行 - 就像手风琴一样。

显然我的 html 与标准的手风琴设置有很大不同，所以我正在努力用我有限的 Jquery 知识来弄清楚如何做到这一点。

请看我上面的 Js Fiddle - 如果你喜欢下面的代码，下面是代码：

谢谢

HTML

 <div style="width: 100%; height: 68px;">
 <div class="expBtn exBlue ex1"><h3>Content<br>one</h3></div>
 <div class="expBtn exOlive ex2"><h3>Content<br>two</h3></div>
 <div class="expBtn exOrange ex3"><h3>Content<br>three</h3></div>
 </div>

 <div class="expArea expArea1">
 This is content one
 </div>

 <div class="expArea expArea2">
 This is content two
 </div>

 <div class="expArea expArea3">
 This is content three
 </div>

CSS

 .expBtn {
width: 190px;
height: 68px;
text-decoration: none;
background-color: #000;
float: left;
cursor: pointer;
 }
 .expBtn h3 {
font-size: 18px;
font-weight: bold;
color: #e8e7e4;
text-transform: none;
line-height: 1.2em;
letter-spacing: 0em;
padding-top: 13px;
padding-left: 13px;
padding-right: 13px;
    padding-bottom: 0;
    font-family: arial;
    margin: 0;
 }
 .expArea {
 display: none;
 width: 570px;
 background-color: #ccc;
 height: 200px;
 }

JS

    $(".ex1").click(function () {
        $(".expArea1").slideToggle(1000);
    });
    $(".ex2").click(function () {
        $(".expArea2").slideToggle(1000);
    });
    $(".ex3").click(function () {
        $(".expArea3").slideToggle(1000);
    });

 $(".exBlue").hover(function () {
$(this).css("background-color","#0092d2");
}, function() {
    $(this).css("background-color","#000");
 });
 $(".exOlive").hover(function () {
$(this).css("background-color","#9bad2a");
}, function() {
    $(this).css("background-color","#000");
 });
 $(".exOrange").hover(function () {
$(this).css("background-color","#ff8a0c");
}, function() {
    $(this).css("background-color","#000");
 });

好的，所以我基本上已经创建了我想要的东西，但是我有大量重复的 JS，我知道任何比我更了解 jquery / javascript 的人都可以简化它们。请查看这个新的 JS 小提琴 - 任何让 JS 崩溃的解决方案都会非常受欢迎！

谢谢

新的 JS 小提琴

http://jsfiddle.net/97n4K/9/

Answer 1

如果您希望保持相同的 html 结构，您可以使用以下内容来获得您想要的；

JS FIDDLE DEMO

将您的 JS 点击处理切换到此；

$('.expBtn').on('click', function () {
    var area = $(this).index() + 1;
    var new_div = $('.expArea' + area);

    // do nothing if it's already visible
    if (!new_div.is(':visible'))
    {
        // slide up all first
        $('.expArea').slideUp(300);
        new_div.slideDown(1000);
    }
});

您可以轻松添加更多 html 部分，只要您遵循您已经完成的相同编号。

Answer 2

您可以使用slideUp 或slideDown 吗？我不能 100% 确定你到底想要达到什么目标，但这个小提琴应该可以帮助你。

       $(".ex1").click(function () {
         $(".expArea1").slideToggle(1000);
         $(".expArea2").slideUp(1000);
         $(".expArea3").slideUp(1000);
   });
   $(".ex2").click(function () {
         $(".expArea2").slideToggle(1000);
         $(".expArea1").slideUp(1000);
         $(".expArea3").slideUp(1000);
       });
   $(".ex3").click(function () {
     $(".expArea3").slideToggle(1000);
         $(".expArea2").slideUp(1000);
         $(".expArea1").slideUp(1000);
   });

http://jsfiddle.net/97n4K/5/

Answer 3

基本上你可以为此使用插件，它会帮助更好

我添加了一些简单的代码，以便您的代码可以工作

<div style="width: 100%; height: 68px;">
  <div class="expBtn exBlue ex1" data-accord = "expArea1"><h3>Broadcast + Arts + Media</h3></div>
  <div class="expBtn exOlive ex2" data-accord = "expArea2"><h3>Business<br>Services</h3></div>
  <div class="expBtn exOrange ex3" data-accord = "expArea3"><h3>Charity +<br>NFP</h3></div>
  </div>


  <div class="expArea expArea1">
      expArea1 content
  </div>

  <div class="expArea expArea2">
      expArea2 content
  </div>

  <div class="expArea expArea3">
      expArea3 content
  </div>

请看data-accord的内容

现在是 JS

$('.expBtn').click(function(){
        var current = $(this).data('accord');
    $('.expArea').each(function(){
        if($(this).not('.'+current).css('display') == "block")
        {
            $(this).slideToggle(); 
        }

    }); 


    $('.'+current).slideToggle(1000); 
}); 



$(".exBlue").hover(function () {
    $(this).css("background-color","#0092d2");
    }, function() {
        $(this).css("background-color","#000");
});
$(".exOlive").hover(function () {
    $(this).css("background-color","#9bad2a");
    }, function() {
        $(this).css("background-color","#000");
});
$(".exOrange").hover(function () {
    $(this).css("background-color","#ff8a0c");
    }, function() {
        $(this).css("background-color","#000");
});

你可以看到它在工作

http://jsfiddle.net/97n4K/6/

希望对你有帮助