Question

使用Mithril生成有效的Bootstrap手风琴时出现问题。当我手动编写这个HTML时，手风琴可以正常工作。

＆＃13;

<div id="mycontent">
    <div class="container">
        <div class="row">
            <div class="col-md-8 p-t-3">
                <div id="bookingaccordion" role="tablist">
                    <div class="panel panel-default">
                        <div id="headingOne" class="panel-heading"
                             role="tab">
                             <h4 class="panel-title">
                                 <a data-target="#collapseOne" data-toggle="collapse"
                                    data-parent="#bookingaccordion">
                                    Address and Contact details
                                 </a>
                             </h4>
                        </div>
                        <div id="collapseOne" class="panel-collapse collapse in"
                             role="tabpanel" aria-labelledby="headingOne">
                             Collapsible contact detail form
                        </div>
                    </div>
                    <div class="panel panel-default">
                        <div id="headingTwo" class="panel-heading" role="tab">
                            <h4 class="panel-title">
                                <a data-target="#collapseTwo" data-toggle="collapse"
                                   data-parent="#bookingaccordion">
                                   Booking details
                                </a>
                            </h4>
                        </div>
                        <div id="collapseTwo" class="panel-collapse collapse"
                            role="tabpanel" aria-labelledby="headingTwo">
                            Collapsible booking detail form
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

＆＃13;

我可以在Mithril视图中使用此代码生成看似完全相同的HTML。

＆＃13;

return m("div.container", [
           m("div.row", [
               m("div.col-md-8.p-t-3", [
                   m("#bookingaccordion", {role: "tablist"}, [
                       m(".panel.panel-default", [
                           m("#headingOne.panel-heading", {role: "tab"}, [
                               m("h4.panel-title", [
                                   m('a[data-target="#collapseOne"
                                       data-toggle="collapse"
                                       data-parent="#bookingaccordion"]',
                                       "Address and Contact details"
                                   )
                               ])
                           ]),
                           m('#collapseOne.panel-collapse.collapse.in
                               [role="tabpanel" aria-labelledby="headingOne"]',
                               "Collapsible contact detail form"
                           )
						]),
                        m(".panel.panel-default", [
                            m("#headingTwo.panel-heading", {role: "tab"}, [
                                m("h4.panel-title", [
                                    m('a[data-target="#collapseTwo"
                                        data-toggle="collapse"
                                        data-parent="#bookingaccordion"]',
                                        "Booking details"
                                    )
                                ])
                            ]),
                            m('#collapseTwo.panel-collapse.collapse
                                [role="tabpanel" aria-labelledby="headingTwo"]',
                                "Collapsible booking detail form"
                             )
                        ])
                    ])
                ])
            ])
        ]);

＆＃13;

生成的HTML完美地显示了手风琴的初始状态，但是单击标题锚点时没有响应（打开或关闭）。我怀疑我是否错误地生成了数据元素但是我很难过。

Answer 1

是的，问题出在data-*属性上，您必须将它们作为属性传递给m函数，如下所示：

m(
  'a', 
  {
    'data-target': "#collapseOne",
    'data-toggle': "collapse",
    'data-parent': "#bookingaccordion"
  },
  "Address and Contact details"
)

您必须对aria-*和role属性执行相同操作。

使用Mithril为Bootstrap手风琴生成HTML

1 个答案: