Jquery手风琴类型功能一次只打开一个项目-Java 学习之路

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

http://jsfiddle.net/97n4K/

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

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

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

显然我的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;
 }

$(".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 FIDDLE

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

3 回答

如果您希望保持相同的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部分，只需按照您已经完成的编号进行操作即可 .

回复于 2024-04-27T22:29:48+08:00

你可以使用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/

回复于 2024-04-27T22:29:48+08:00

基本上你可以使用一个插件，它会有所帮助

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

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

我希望这可以提供帮助

回复于 2024-04-27T22:29:48+08:00

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

3 回答

相关问题