我正在嘗試使用以下代碼創建手風琴。如果將以下標簽放在一起，則其工作正常。我想在頁面其他部分的某個標簽內插入元素 <dt> <li class="nav-item" id='l1' > <a class="nav-link active js-accordionTrigger" href="#accordion1" aria-expanded="false" aria- controls="accordion1"> <i class="material-icons">camera</i> Studio </a> </li></dt> <dd class="accordion-content accordionItem is-collapsed" id="accordion1" aria-hidden="true"> <p>Lorem ipsum doplacerat. Cras justo purus,enim sit amet varius. Pellentesque justo dui, sodales quis luctus a, iaculis eget mauris.</p> </dd> 如果我嘗試在這里放置標簽。它不起作用，我可以看到錯誤 setAttribute undefined <div class="tab-content tab-space"> <div class="tab-pane active text-center gallery" > <dd class="accordion-content accordionItem is-collapsed" id="accordion1" aria-hidden="true"> <p>Lorem iet mauris.</p> </dd> </div> </div> 這是Javascript和Jquery代碼 <script> $(document).ready(function () { var d = document, $accordionToggles = $('.js-accordionTrigger'), touchSupported = ('ontouchstart' in window), pointerSupported = ('pointerdown' in window), skipClickDelay = function (e) { e.preventDefault(); e.target.click(); }, setAriaAttr = function (el, ariaType, newProperty) { el[0].setAttribute(ariaType, newProperty); }, setAccordionAria = function (el1, el2, expanded) { setAriaAttr(el1, 'aria-expanded', expanded ? true : false); setAriaAttr(el2, 'aria-expanded', expanded ? false : true); },
1 回答
素胚勾勒不出你
TA貢獻1827條經驗 獲得超9個贊
設置屬性https://api.jquery.com/attr/有attratjquery 方法。
同樣var $currQuestion = $accordionToggles.eq(i), $currAnswer = $currQuestion.closest('dt').next('dd')在這里，您將問題聲明為單個元素，并將答案作為數組，因此您必須添加eq(0)到$currQuestion.closest('dt').next('dd')，或者遍歷所有 el2 項目以設置屬性。
當您包裝dd到其他標簽divs時，jquerynext()無法在dt附近找到，因此您$currAnswer的未定義，您必須使用$currQuestion.closest('dt').next('.tab-content.tab-space').find('dd')
解決方案：
setAriaAttr = function (el, ariaType, newProperty) {
el.attr(ariaType, newProperty);
},
setAccordionAria = function (el1, el2, expanded) {
setAriaAttr(el1, 'aria-expanded', expanded);
setAriaAttr(el2, 'aria-expanded', !expanded);
},
...
for (var i = 0; i < $accordionToggles.length; i++) {
var $currQuestion = $accordionToggles.eq(i),
$currAnswer = $currQuestion.closest('dt').next('.tab-content.tab-space').find('dd').eq(0);
工作小提琴https://jsfiddle.net/w7gpLrse/
- 1 回答
- 0 關注
- 209 瀏覽
添加回答
舉報
0/150
提交
取消