在流星中单击按钮时显示动态卡的隐藏部分答案

【问题标题】：show hidden part of the dynamic card on button click in meteor在流星中单击按钮时显示动态卡的隐藏部分
【发布时间】：2016-08-26 15:30:17
【问题描述】：

我已经动态创建了一张卡片，并通过将其放入另一个模板并在每个块上调用它来隐藏部分内容，它工作正常。现在如何在按钮点击时显示隐藏部分？

我在这里附上我的代码。

  <div id="newActionCard">
        {{#each newaction}}
                     <div class="workflowcard">
                     <div class="module-card">

                         <div class="  assigned-team">{{team}}</div>
                        <div class=" newaction-name">{{action_title}}</div><hr>
                        <div class="description">{{description}}</div>
                        <div class=" due-on">Due on:{{d_date}}</div><hr>
                        <div class="subcontent">
                       <div class="action"> {{actioncardsubcontent}} </div>
                       </div>
                       </div>



            <div class="btn-box newaction">
          <button type="button" class="btn btn-info" id="cancelsub">New Action</button>
          <button type="submit" class="btn btn-info" id="createbtnsub">Show Options</button>
        </div>
                </div>

                    {{/each}}
            </div>




    </template>

<template name="actioncardsubcontent">
    <div class="subcontent">
             <div class="modulepath">{{module_list}}</div>
            <div class="linkto">Linked To: {{link}}</div>
             <div class="description">{{description}}</div>
    </div>
</template>

而JS是：

Template.workflow.events({
    "click .actionBtn":function(){

        $('#createAction').show();
    },

   "click #createbtnsub" : function() {
         $( ".subcontent" ).show();
        $('#createbtnsub').hide();
       $('#cancelsub').hide();
}


});

Template.actioncardsubcontent.rendered = function(){
    this.$(".subcontent").hide();
};

【问题讨论】：

标签： javascript jquery html css meteor

【解决方案1】：

您包含的模板不正确。应该是{{> actioncardsubcontent}}
要链接隐藏/显示按钮，请关注this
如果上述步骤不能解决问题，请将 js 脚本以及帮助程序和事件共享。

【讨论】：

现在它显示了隐藏部分，但它适用于所有卡片而不是 1 张卡片。意味着当我单击特定卡时，它应该显示隐藏的部分。如何解决？我也添加了我的js。请不要介意我对流星很陌生。
<div class="subclass" id="{{id}}"> <div class="action"> {{actioncardsubcontent}} </div> </div> 对该 ID 进行操作，并且只会显示/关闭。
是 JS：替换：$( ".subcontent" ).show(); 为 var id='#'+this._id; ($(id).show();
你能帮帮我吗？

【解决方案2】：

我认为最好使用一些html标签来隐藏内容......然后......通过点击来取回它们。标签是

<details>
<summary>Card</summary>
<p>content 1</p>
<p>content 2</p>
</details>

将您的详细信息放在摘要标记之后。点击卡片（摘要）可以得到卡片的隐藏内容。

【讨论】：

【解决方案3】：

我认为您将不得不为另一个模板应用另一个循环。

<template name="actioncardsubcontent">
    <div class="subcontent">
             {{#each newaction}}
             <div class="modulepath">{{module_list}}</div>
            <div class="linkto">Linked To: {{link}}</div>
             <div class="description">{{description}}</div>
            {{/each}}
    </div>
</template>

【讨论】：