[英]Meteor Live Accordion Menu
我创建了一个社交媒体风格的网站,并使用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>
JavaScript应该在events
块中
Template.postlist.events({
"click .accordion-section-title" : function(){
// your code here
}
})
参见此示例流星托多教程
或者,使用twbs:bootstrap
或semantic:ui
软件包,并将其内置函数用于手风琴。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.