如何製作手風琴效果？

我試圖讓accordion對這段代碼，就像this sample：如何製作手風琴效果？

<div class="row"> 
    <div class="col-sm-5 col-md-3 boxcontainer"> 
     <span class="boxheader"> 
      1 
     </span> 
     <div class="box"> 
      ABC 
     </div> 
     <div class="boxfooter"> 
      DEF 
     </div> 
    </div> 
    <div class="col-sm-5 col-md-3 boxcontainer"> 
     <span class="boxheader"> 
      2 
     </span> 
     <div class="box"> 
      ABC 
     </div> 
     <div class="boxfooter"> 
      DEF 
     </div> 
    </div> 
</div>

當我點擊boxheader的box和boxfooter部位出現。我該如何處理這個問題？

來源

2014-02-22 ABCmo

這是你的全部代碼嗎？因爲這需要Jquery。我沒有看到你添加它。接下來，您需要在腳本區域添加手風琴的功能和稱爲手風琴的div。在你的例子下實際上是源代碼。所以檢查一下。 – Dorvalla

@Dorvalla，我已經更新了我的發佈代碼。 – ABCmo

使用方法jQuery的slideToggle()。嘗試下面的代碼。

$("body").on("click",".boxheader",function(){ 
    $(".box").hide(); 
    $(".boxfooter").hide(); 
    $(this).parent().find(".box").slideToggle(); 
    $(this).parent().find(".boxfooter").slideToggle(); 
});

CSS：

.box,.boxfooter{ 
    display:none; 
}

檢查Fiddle

來源

2014-02-22 10:51:09

我已更新我的發佈代碼。 – ABCmo

@ user3319426查看我更新的代碼和[fiddle]（http://jsfiddle.net/r36x2/2/） –

FIDDLE

代碼總是在你指定的鏈接中給出。

$(function() { 
    $("#accordion").accordion(); 
    });

來源

2014-02-22 10:56:00

如何製作手風琴效果？

回答

相關問題