Javascript 无法读取属性'；setAttribute'；未定义的

我试图创建一个手风琴使用下面的代码。如果将以下标签放在一起，则其工作正常。我想在页面的其他部分的某个标记中插入元素

     <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未定义

         <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);
    },

    switchAccordion = function (e) {
        e.preventDefault();

        var $this = $(this),
            $thisQuestion = $this,
            $thisAnswer = $this.closest('dt').next('dd'),
            // Check if the answer is in collapsed state
            isCollapsed = $thisAnswer.hasClass('is-collapsed');

        // Iterate over all the toggles and collaspse
        // them all and only toggle the current tab
        for (var i = 0; i < $accordionToggles.length; i++) {
            var $currQuestion = $accordionToggles.eq(i),
                $currAnswer = $currQuestion.closest('dt').next('dd');

            setAccordionAria($currQuestion, $currAnswer, false);

            $currQuestion.addClass('is-collapsed').removeClass('is-expanded');
            $currAnswer.addClass('is-collapsed').removeClass('is-expanded animateIn');
        }

        if (isCollapsed) {
            setAccordionAria($thisQuestion, $thisAnswer, true);

            $thisQuestion.addClass('is-expanded is-collapsed');
            $thisAnswer.addClass('is-expanded animateIn').removeClass('is-collapsed');
        }
    };

// Assign the click events using jQuery

if (touchSupported) {
    $accordionToggles.on('touchstart', skipClickDelay);
}
if (pointerSupported) {
    $accordionToggles.on('pointerdown', skipClickDelay);
}
$accordionToggles.on('click', switchAccordion);
    });

    </script>

$（文档）.ready（函数（）{
var d=文件，
$accordionToggles=$（'.js accordionTrigger'），
touchSupported=（窗口中的“ontouchstart”），
pointerSupported=（窗口中的“pointerdown”），
skipClickDelay=功能（e）{
e、 预防默认值（）；
e、 target.click（）；
},
setAriaAttr=函数（el、ariaType、newProperty）{
el[0].setAttribute（ariaType，newProperty）；
},
SetAccordinaria=函数（el1、el2、扩展）{
setAriaAttr（el1，'aria expanded'，expanded？真：假）；
setAriaAttr（el2，'aria expanded'，expanded？false:true）；
},
开关手风琴=功能（e）{
e、 预防默认值（）；
变量$this=$（this），
$thisQuestion=$this，
$thisAnswer=$this.closest（'dt'）。next（'dd'），
//检查答案是否处于折叠状态
isCollapsed=$thisAnswer.hasClass（'is-collapsed'）；
//迭代所有切换和折叠
//它们都是，并且只切换当前选项卡
对于（变量i=0；i<$accordiontogles.length；i++）{
变量$currQuestion=$accordionToggles.eq（i），
$currAnswer=$currQuestion.closest（'dt'）。next（'dd'）；
SetAccordinaria（$currQuestion，$currAnswer，false）；
$currQuestion.addClass（'is-collapsed'）.removeClass（'is-expanded'）；
$currAnswer.addClass（'is-collapsed'）.removeClass（'is-expanded animateIn'）；
}
如果（已合并）{
SetAccordinaria（$thisQuestion，$ThisResponse，true）；
$thisQuestion.addClass（'is-expanded-is-collapse'）；
$thisAnswer.addClass（'is-expanded animateIn'）.removeClass（'is-collapsed'）；
}
};
//使用jQuery分配单击事件
如果（支持触摸屏）{
$accordionToggles.on（'touchstart'，skipClickDelay）；
}
如果（支持指针）{
$accordiontogles.on（'pointerdown'，skipClickDelay）；
}
$accordiontogles.on（'click'，switchAccordion'）；
});

对于set属性，jquery中有

attr

方法

另外，

var$currQuestion=$accordionToggles.eq（i），$currAnswer=$currQuestion.closest（'dt'）。下一步（'dd'）

这里您将问题声明为单个元素，并将答案声明为数组，因此您必须将

eq（0）

添加到

$currQuestion.closest（'dt'）。下一步（'dd'）

，或者迭代所有el2项以设置属性

当您将

dd

包装到其他标记

div

中时，jquery的

next（）

无法在附近找到

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);

setAriaAttr=函数（el、ariaType、newProperty）{
el.attr（ariaType，newProperty）；
},
SetAccordinaria=函数（el1、el2、扩展）{
狗尾草（el1，'扩大'，扩大）；
setAriaAttr（el2，'aria expanded'，！expanded）；
},
...
对于（变量i=0；i<$accordiontogles.length；i++）{
变量$currQuestion=$accordionToggles.eq（i），
$currAnswer=$currQuestion.closest（'dt'）。next（'tab.content.tab space'）。find（'dd'）。eq（0）；

---

工作小提琴

更新答案。尝试

$currAnswer=$currQuestion.closest（'dt'）。下一步（'.tab-content.tab-space dd'）

$currAnswer=$currQuestion.closest（'dt'）。下一步（'tab-content.tab-space dd'）。eq（0）；。尝试我发布的第一个代码

$currQuestion.closest（'dt'）。下一步（'tab-content.tab-space'）。tab-space'）。查找（'dd

仍然不工作，没有错误，但手风琴不工作。我只想在单击studio、work或fav后，手风琴就可以了。只有一个手风琴应该保持打开状态，另一个应该关闭。看一看