使用秘银为 Bootstrap 手风琴生成 HTML
Using Mithril to generate HTML for a Bootstrap Accordion
使用秘银生成功能正常的 Bootstrap 手风琴时遇到问题。
当我手动编写此 HTML 时手风琴工作正常。
<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>
我可以在 Mithril 视图中使用此代码生成看起来完全相同的内容 HTML。
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"
)
])
])
])
])
]);
生成的HTML完美显示手风琴初始状态,但点击标题锚点时没有任何反应(打开或关闭)。
我怀疑我生成的数据元素不正确,但我很困惑。
是的,问题出在 data-*
属性上,您必须将它们作为属性传递给 m
函数,如下所示:
m(
'a',
{
'data-target': "#collapseOne",
'data-toggle': "collapse",
'data-parent': "#bookingaccordion"
},
"Address and Contact details"
)
您必须对 aria-*
和 role
属性执行相同的操作。
使用秘银生成功能正常的 Bootstrap 手风琴时遇到问题。 当我手动编写此 HTML 时手风琴工作正常。
<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>
我可以在 Mithril 视图中使用此代码生成看起来完全相同的内容 HTML。
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"
)
])
])
])
])
]);
生成的HTML完美显示手风琴初始状态,但点击标题锚点时没有任何反应(打开或关闭)。 我怀疑我生成的数据元素不正确,但我很困惑。
是的,问题出在 data-*
属性上,您必须将它们作为属性传递给 m
函数,如下所示:
m(
'a',
{
'data-target': "#collapseOne",
'data-toggle': "collapse",
'data-parent': "#bookingaccordion"
},
"Address and Contact details"
)
您必须对 aria-*
和 role
属性执行相同的操作。