Meteor 现场手风琴菜单

Question

我正在创建一个社交媒体风格的网站，并使用 Meteor 和 MongoDB 创建帖子，{{title}} 和 {{content}} 在手风琴菜单内，标题位于菜单标题上，内容位于切换手风琴菜单。

我的代码如下所示：

HTML：

<template name="postsList">

{{#each posts}}



<div class="accordion">
<div class="accordion-section">
    <a class="accordion-section-title" href="#accordion-1">{{title}}</a>

    <div id="accordion-1" class="accordion-section-content">
        <p>{{content}}</p>
    </div><!--end .accordion-section-content-->
</div><!--end .accordion-section-->
</div><!--end .accordion-->


{{/each}}

</template>

JS：

    function close_accordion_section() {
    $('.accordion .accordion-section-title').removeClass('active');
    $('.accordion .accordion-section-content').slideUp(300).removeClass('open');
}

$('.accordion-section-title').click(function(e) {
    // Grab current anchor value
    var currentAttrValue = $(this).attr('href');

    if($(e.target).is('.active')) {
        close_accordion_section();
    }else {
        close_accordion_section();

        // Add active class to section title
        $(this).addClass('active');
        // Open up the hidden content panel
        $('.accordion ' + currentAttrValue).slideDown(300).addClass('open'); 
    }

    e.preventDefault();
});

CSS：

/*----- Accordion -----*/
.accordion, .accordion * {
-webkit-box-sizing:border-box; 
-moz-box-sizing:border-box; 
box-sizing:border-box;
}

.accordion {
overflow:hidden;
box-shadow:0px 1px 3px rgba(0,0,0,0.25);
border-radius:3px;
background:#f7f7f7;
}

/*----- Section Titles -----*/
.accordion-section-title {
width:100%;
padding:15px;
display:inline-block;
border-bottom:1px solid #1a1a1a;
background:#333;
transition:all linear 0.15s;
/* Type */
font-size:1.200em;
text-shadow:0px 1px 0px #1a1a1a;
color:#fff;
}

.accordion-section-title.active, .accordion-section-title:hover {
background:#4c4c4c;
/* Type */
text-decoration:none;
}

.accordion-section:last-child .accordion-section-title {
border-bottom:none;
}

/*----- Section Content -----*/
.accordion-section-content {
padding:15px;
display:none;
}

但是虽然{{title}}显示正确，但当你点击它时（应该打开{{content}}）它没有，尽管MongoDB数据库中的内容是正确的，为什么会发生这种情况？

任何帮助将不胜感激！

语义 UI 代码：

$(document).ready(function(){   
$('.ui.accordion')
.accordion();
});

 <template name="postsList">

 {{#each posts}}

<div class="ui accordion">
  <div class="active title">
 <i class="dropdown icon"></i>
 {{title}}
 </div>
 <div class="content">
  {{content}}
  </div>
  </div>
{{/each}}

  </template>

Answer 1

javascript 应该在events 块中

Template.postlist.events({
      "click .accordion-section-title" : function(){
          // your code here

      } 


 })

见这个例子Meteor Todo Tutorial

或者，使用 twbs:bootstrap 或 semantic:ui 包并将其内置函数用于手风琴。