我无法在课程之间切换

Question

HTML代码

<template name="pI">
  <p class="bucket">
    <li class= "contentMain">{{{content}}}</li>
    <li><a href="#" class= "expandOrCollapse">(...)</a></li>
  </p>
</template>

JS代码

    Template.pI.events({
      'click .expandOrCollapse':function(event){
       event.preventDefault();
       $(event.target).closest().toggleClass("contentMain Big");
      }
  });

CSS代码

.contentMain{
    position: relative;
    overflow: hidden;
    height: 60px;
    top: -15px;
    font-family: Palatino Linotype, Georgia, Verdana, sans-serif;
}

.Big{
    position: relative;
    height: auto;
    top: -15px;
    font-family: Palatino Linotype, Georgia, Verdana, sans-serif;
}

当我在当前类是"contentMain"时单击"expandOrCollapse"并且当我在当前单击"expandOrCollapse"时将类"Big"切换为"contentMain"时,我希望类"contentMain"切换为"Big"阶级是"大".我不认为我对JS代码有任何错误.任何帮助和建议将受到高度赞赏

Answer 1

因为您要查找的元素不是单击元素的祖先,而是单击元素的父元素的前一个兄弟元素

$(event.target).parent().prev().toggleClass("contentMain Big");

该closest()方法用于查找与选择器匹配的第一个祖先元素