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

我想要课程＆＃34; contentMain＆＃34;切换到＆＃34; Big＆＃34;当我点击＆＃34; expandOrCollapse＆＃34;当前班级是＆＃34; contentMain＆＃34;和班级＆＃34; Big＆＃34;切换到＆＃34; contentMain＆＃34;当我点击＆＃34; expandOrCollapse＆＃34;当前班级是＆＃34; Big＆＃34;。我不认为我对JS代码有任何错误。任何帮助和建议将受到高度赞赏

Answer 1

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

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

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

我无法在课程之间切换

1 个答案: