台灣最大程式設計社群網站
線上人數
939
 
會員總數:242479
討論主題:187518
歡迎您免費加入會員
討論區列表 >> AJAX / JSON / jQuery >> jQuery 展開功能問題
[]  
[我要回覆]
1
回應主題 加入我的關注話題 檢舉此篇討論 將提問者加入個人黑名單
jQuery 展開功能問題
價值 : 5 QP  點閱數:312 回應數:1

樓主

蝴蝶
門外漢
0 2
48 3
發送站內信

我弄了一個類似FAQ的功能,以下是JS的部份我想要改成同一時間只能展開一個,例如,點開A後在點B,A會自動縮起來,我該怎麼改呢?
<script type="text/javascript">
//uses classList, setAttribute, and querySelectorAll
//if you want this to work in IE8/9 youll need to polyfill these
(function(){
var d = document,
accordionToggles = d.querySelectorAll('.js-accordionTrigger'),
setAria,
setAccordionAria,
switchAccordion,
touchSupported = ('ontouchstart' in window),
pointerSupported = ('pointerdown' in window);

skipClickDelay = function(e){
e.preventDefault();
e.target.click();
}

setAriaAttr = function(el, ariaType, newProperty){
el.setAttribute(ariaType, newProperty);
};
setAccordionAria = function(el1, el2, expanded){
switch(expanded) {
case "true":
setAriaAttr(el1, 'aria-expanded', 'true');
setAriaAttr(el2, 'aria-hidden', 'false');
break;
case "false":
setAriaAttr(el1, 'aria-expanded', 'false');
setAriaAttr(el2, 'aria-hidden', 'true');
break;
default:
break;
}
};
//function
switchAccordion = function(e) {
console.log("triggered");
e.preventDefault();
var thisAnswer = e.target.parentNode.nextElementSibling;
var thisQuestion = e.target;
if(thisAnswer.classList.contains('is-collapsed')) {
setAccordionAria(thisQuestion, thisAnswer, 'true');
} else {
setAccordionAria(thisQuestion, thisAnswer, 'false');
}
thisQuestion.classList.toggle('is-collapsed');
thisQuestion.classList.toggle('is-expanded');
thisAnswer.classList.toggle('is-collapsed');
thisAnswer.classList.toggle('is-expanded');

thisAnswer.classList.toggle('animateIn');
};
for (var i=0,len=accordionToggles.length; i<len; i++) {
if(touchSupported) {
accordionToggles[i].addEventListener('touchstart', skipClickDelay, false);
}
if(pointerSupported){
accordionToggles[i].addEventListener('pointerdown', skipClickDelay, false);
}
accordionToggles[i].addEventListener('click', switchAccordion, true);
}
})();
</script>




搜尋相關Tags的文章: [ jq ] , [ 展開功能 ] ,
本篇文章發表於2017-07-30 17:19
別忘捐VP感謝幫助你的人 新手會員瞧一瞧
1樓
回應

淺水員
檢舉此回應
提問時,程式碼請用code包起來
直接用程式碼回答

本篇文章回覆於2017-07-31 03:54
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
   
1

回覆
如要回應,請先登入.