gpt4 book ai didi

javascript - meteor 现场 Accordion 菜单

转载 作者:行者123 更新时间:2023-11-28 05:18:57 28 4
gpt4 key购买 nike

我正在创建一个社交媒体风格的网站,并使用 Meteor 和 MongoDB 创建帖子,其中包含 {{title}}{{content}}一个 Accordion 菜单,标题在菜单的标题上,内容在切换 Accordion 菜单中。

我的代码是这样的:

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 block 中

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

}


})

查看此示例 Meteor Todo Tutorial

或者,使用 twbs:bootstrapsemantic:ui 包并将它们的内置函数用于 accordion。

关于javascript - meteor 现场 Accordion 菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39165293/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com