Question

我的要求：
1.从mongo集合中获取数据并显示为手风琴
2.将所选html手风琴标签的活动ID设置为与集合中文档的活动ID相同 3.当我们点击UI中的任何一个手风琴条目时，获取下拉过渡的 sample.html

     {{#each listjobs}}
        <button class="accordion">{{platform}}</button>
        <div class="panel">
            <ul class="panel_elements">
                  <li><input type="submit" name="delete" value="Delete" /></li>
                  <li><input type="checkbox" name="abc" value="abc" />{{abc}}</li>
                  <li><input type="checkbox" name="def" value="def" />{{def}}</li>
                  <li><input type="checkbox" name="ghi" value="ghi" />{{ghi}}</li>
                  <li><input type="submit" name="trigger" value="Trigger" /></li>
                  <li id="status">SUCCESS / FAIL</li>
            </ul>
        </div>
    {{/each}}

sample.css

    button.accordion {
        background-color: #eee;
        color: #444;
        cursor: pointer;
        padding: 18px;
        width: 100%;
        border: none;
        text-align: left;
        outline: none;
        font-size: 15px;
        transition: 0.4s;
    }

    button.accordion.active, button.accordion:hover {
        background-color: #ccc;
        border: 1px solid black;
    }

    button.accordion:after {
        content: '\002B';
        color: #777;
        font-weight: bold;
        float: right;
        margin-left: 5px;
    }

    button.accordion.active:after {
        content: "\2212";
    }

    div.panel {
        padding: 0 18px;
        background-color: white;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.2s ease-out;
    }
    ul.panel_elements{
      list-style-type:none;
    }
    ul.panel_elements li{
      display:inline-block;

    }

sample.js

Template.trigger.events({
    'click .accordion':function(){
        this.classList.toggle("active");
        var panel = this.nextElementSibling;
        if (panel.style.maxHeight){
          panel.style.maxHeight = null;
        } else {
          panel.style.maxHeight = panel.scrollHeight + "px";
        } 
    },

});

通过获取条目mongo集合显示列表，但是当我在UI中点击作业时，手风琴下拉列表不会出现!!。
有谁可以帮我解决这个问题？或者还有其他方法吗？

Answer 1

我已经重复使用已有的here：

<强>模板：

{{#each listjobs}}
<button class="accordion">{{platform}}</button>
<div class="panel">
   <ul class="panel_elements">
              <li><input type="submit" name="delete" value="Delete" /></li>
              <li><input type="checkbox" name="abc" value="abc" />{{abc}}</li>
              <li><input type="checkbox" name="def" value="def" />{{def}}</li>
              <li><input type="checkbox" name="ghi" value="ghi" />{{ghi}}</li>
              <li><input type="submit" name="trigger" value="Trigger" /></li>
              <li id="status">SUCCESS / FAIL</li>
        </ul>
{{/each}}

<强> CSS：

button.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}

button.accordion.active, button.accordion:hover {
    background-color: #ccc;
}

div.panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

我如何使用手风琴来展示馆藏文件？

1 个答案: