1
我曾試圖不使用jQuery的UI庫手動重新創建和手風琴風格的菜單。一切工作正常，除非我點擊打開一個盒子，它立即打開，沒有任何過渡。我試圖通過添加一個名爲open的類來隱藏每個框。我在每個動態內部生成數據，因此每次數據都會發生變化，每個數據內部的數據將完全不同。創建手風琴手動
「我不想一種解決方案包含ACCORDION」 [抱歉在帽:-)鍵入]
我有安裝此在的jsfiddle。有人可以看看這個。
https://jsfiddle.net/2nfd9utt/
查看示例代碼，請參閱下文。 這是我使用的HTML結構。
<ul class="prfaccordion">
<li>
<h3 class="prfaccDetailsHeader"> Committees </h3>
<div class="prfaccDetails">
<ul>
<li> Sample Data 1 </li>
<li> Sample Data 2 </li>
<li> Sample Data 3 </li>
</ul>
</div>
</li>
<li>
<h3 class="prfaccDetailsHeader"> Contributions </h3>
<div class="prfaccDetails">
<ul>
<li> Sample Data 1 </li>
<li> Sample Data 2 </li>
<li> Sample Data 3 </li>
</ul>
</div>
</li>
<li>
<h3 class="prfaccDetailsHeader"> Areas </h3>
<div class="prfaccDetails">
<ul>
<li> Sample Data 1 </li>
<li> Sample Data 2 </li>
<li> Sample Data 3 </li>
</ul>
</div>
</li>
</div>
這裏的風格，
.prfaccordion{
width: 150px;
}
.prfgrybox {
background: #eeeeee;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
padding: 10px;
margin: 0px 0px 10px 0px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
text-align: center;
}
ul.prfaccordion li {
list-style: none;
margin: 0px 0px 2px 0px;
}
ul.prfaccordion li h3 {
background: #eeeeee url(images/downarr.png) no-repeat 95% 50%;
padding: 6px 10px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
margin: 0px;
color: #3a4f60;
font-size: 15px;
}
ul.prfaccordion li h3.open {
background: #eeeeee url(images/uparr.png) no-repeat 95% 50%;
border-radius: 6px 6px 0px 0px;
-moz-border-radius: 6px 6px 0px 0px;
-webkit-border-radius: 6px 6px 0px 0px;
}
ul.prfaccordion li .prfaccDetails {
background: #fbfbfb;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
font-size: 13px;
border-radius: 0px 0px 6px 6px;
-moz-border-radius: 0px 0px 6px 6px;
-webkit-border-radius: 0px 0px 6px 6px;
color: #5787ad;
display: none;
transition:all ease .5s;
-moz-transition:all ease .5s;
-webkit-transition:all ease .5s;
}
ul.prfaccordion li .prfaccDetails ul li {
padding: 5px 0px 5px 14px;
position: relative;
border-bottom: 1px solid #FFFFFF;
}
ul.prfaccordion li .prfaccDetails ul li a {
font-size: 13px !important;
color: #5787ad !important;
}
ul.prfaccordion li .prfaccDetails ul li:before {
position: absolute;
top: 9px;
left: 0px;
width: 8px;
height: 8px;
border-radius: 100%;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
content: "";
background: #b1c7cc;
}
ul.prfaccordion li .prfaccDetails.open {
transition:all ease .5s;
-moz-transition:all ease .5s;
-webkit-transition:all ease .5s;
display: block;
}
}
這裏是腳本，
$(document).ready(function() {
$(".prfaccDetailsHeader").click(function (event) {
if ($(this).hasClass("open")) {
$('.prfaccDetailsHeader').removeClass("open");
$('.prfaccDetails').removeClass("open");
return false;
}
$('.prfaccDetailsHeader').each(function (i, obj) {
$(this).removeClass('open');
});
$('.prfaccDetails').each(function (event) {
$(this).removeClass('open');
});
$(this).addClass("open");
$(this).parent().find('.prfaccDetails').addClass("open");
});
});
對不起你能解釋一下？ – locknies
我以爲OP不想要JQuery – DonO
他不想要jquery-ui，但他清楚地使用jquery – Craicerjack