Question

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

http://jsfiddle.net/97n4K/

当您单击网格项时，该项目的内容div将打开，当您再次单击它时，它将关闭。这很好。

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

例如，我点击“内容一” - 它打开“内容区域一” - 现在，如果我点击“内容二”，我希望“内容区域一”关闭（slideUp）和“内容区域二”打开（ slideDown）同时 - 就像手风琴一样。

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

请参阅上面的Js小提琴 - 如果您愿意，请参阅下面的代码：

由于

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都会受到极大的关注！

由于

NEW JS FIDDLE

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/

我希望这可以提供帮助

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

3 个答案: