Silverstripe Bootstrap 手风琴边栏
Silverstripe Bootstrap Accordion Sidebar
您好,我正在使用 silverstripe 创建一个站点并尝试使用 bootstrap 手风琴创建动态 sidenav,我已经使用 $Pos 为 id 和 data-parent 属性创建唯一值。
由于 $Pos 正在重置,我 运行 遇到了与列表中较早的项目具有相同 ID 和数据父值的第 3 级项目的问题。
我的代码如下:
<div id="extra-links-section" class="extra-nav">
<div class="list-group panel">
<% loop Menu(4) %>
<a class="$LinkingMode list-group-item list-group-item-success" href="<% if $Children && URLSegment != 'coaches-and-managers' %>#dropdown$Pos<% else %>$Link<% end_if %>" <% if $Children && URLSegment != 'coaches-and-managers' %>data-toggle="collapse"<% end_if %> data-parent="#extra-links-section">$Title <% if $Children && URLSegment != 'coaches-and-managers' %><i class="fa fa-caret-down"></i><% end_if %></a>
<% if $Children && URLSegment != 'coaches-and-managers' %>
<div class="collapse list-group-submenu" id="dropdown$Pos">
<% loop $Children %>
<a class="$LinkingMode list-group-item list-group-item-success" href="<% if $Children %>#dropdown$Pos<% else %>$Link<% end_if %>" <% if $Children %>data-toggle="collapse"<% end_if %> data-parent="#dropdown$Pos">$Title <% if $Children %><i class="fa fa-caret-down"></i><% end_if %></a>
<% if $Children %>
<div class="collapse list-group-submenu" id="dropdown$Pos">
<% loop $Children %>
<a class="$LinkingMode list-group-item list-group-item-success" href="<% if $Children %>#dropdown$Pos<% else %>$Link<% end_if %>" <% if $Children %>data-toggle="collapse"<% end_if %> data-parent="#dropdown$Pos">$Title <% if $Children %><i class="fa fa-caret-down"></i><% end_if %></a>
<% if $Children %>
<div class="collapse list-group-submenu" id="dropdown$Pos">
<% loop $Children %>
<a class="$LinkingMode list-group-item list-group-item-success" data-parent="#dropdown$Pos" href="$Link">$Title</a>
<% end_loop %>
</div>
<% end_if %>
<% end_loop %>
</div>
<% end_if %>
<% end_loop %>
</div>
<% end_if %>
<% end_loop %>
这个功能可以用 $Pos 实现吗?如果我没有那么多子页面,我可以看到它会起作用。我需要使用 js 才能让它起作用吗?任何有关解决方案的帮助将不胜感激。
Drawrdesign建议后的代码输出:
(由于字符限制,我删除了一些 if a 标签)
<div class="extra-nav" id="extra-links-section">
<div class="list-group panel">
<a class="link list-group-item list-group-item-success"
data-parent="#extra-links-section" href=
"/sport/clubs/rugby/first-xv/">First XV</a> <a class=
"link list-group-item list-group-item-success" data-parent=
"#extra-links-section" href="/sport/clubs/rugby/second-xv/">Second
XV</a> <a class="link list-group-item list-group-item-success"
data-parent="#extra-links-section" href=
"/sport/clubs/rugby/under-16/">Under 16</a> <a class=
"link list-group-item list-group-item-success" data-parent=
"#extra-links-section" href="/sport/clubs/rugby/under-15/">Under
15</a> <a class="link list-group-item list-group-item-success"
data-parent="#extra-links-section" href=
"/sport/clubs/rugby/under-14a/">Under 14A</a> <a class=
"link list-group-item list-group-item-success" data-parent=
"#extra-links-section" href="/sport/clubs/rugby/under-14b/">Under
14B</a> <a class=
"link list-group-item list-group-item-success collapsed"
data-parent="#extra-links-section" data-toggle="collapse" href=
"/sport/clubs/rugby/#dropdown1-7">Draws <i class=
"fa fa-caret-down"></i></a>
<div class="list-group-submenu collapse" id="dropdown1-7" style=
"height: 0px;">
<a class="link list-group-item list-group-item-success"
data-parent="#dropdown7-1" href=
"/sport/clubs/rugby/draws/2nd-may-2015/">2nd May 2015</a>
<a class="link list-group-item list-group-item-success"
data-parent="#dropdown7-2" href=
"/sport/clubs/rugby/draws/9th-may-2015/">9th May 2015</a>
<a class="link list-group-item list-group-item-success"
data-parent="#dropdown7-3" href=
"/sport/clubs/rugby/draws/16th-may-2015/">16th May 2015</a>
</div><a class=
"link list-group-item list-group-item-success collapsed"
data-parent="#extra-links-section" data-toggle="collapse" href=
"/sport/clubs/rugby/#dropdown1-8">Results <i class=
"fa fa-caret-down"></i></a>
<div class="list-group-submenu collapse" id="dropdown1-8" style=
"height: 0px;">
<a class="link list-group-item list-group-item-success"
data-parent="#dropdown8-1" href=
"/sport/clubs/rugby/results-2/2nd-may-2015/">2nd May 2015</a>
<a class="link list-group-item list-group-item-success"
data-parent="#dropdown8-2" href=
"/sport/clubs/rugby/results-2/9th-may-2015/">9th May 2015</a>
</div><a class="link list-group-item list-group-item-success"
data-parent="#extra-links-section" href=
"/sport/clubs/rugby/coaches-and-managers/">Coaches and Managers</a>
<a class="link list-group-item list-group-item-success collapsed"
data-parent="#extra-links-section" data-toggle="collapse" href=
"/sport/clubs/rugby/#dropdown1-10">Previous Seasons <i class=
"fa fa-caret-down"></i></a>
<div class="list-group-submenu collapse" id="dropdown1-10" style=
"height: 0px;">
<a class="link list-group-item list-group-item-success"
data-parent="#dropdown10-1" data-toggle="collapse" href=
"/sport/clubs/rugby/#dropdown10-1">2014 <i class=
"fa fa-caret-down"></i></a>
<div class="list-group-submenu collapse in" id="dropdown10-1"
style="height: auto;">
<a class="link list-group-item list-group-item-success"
data-parent="#dropdown1-1" href=
"/sport/clubs/rugby/previous-seasons/2014/first-xv-2014/">First
XV 2014</a> <a class=
"link list-group-item list-group-item-success" data-parent=
"#dropdown1-7" data-toggle="collapse" href=
"/sport/clubs/rugby/#dropdown1-7">Draws <i class=
"fa fa-caret-down"></i></a>
<div class="collapse list-group-submenu" id="dropdown1-7">
<a class="link list-group-item list-group-item-success"
data-parent="#dropdown7-1" href=
"/sport/clubs/rugby/previous-seasons/2014/draw/5th-april-2014/">
5th April 2014</a> <a class=
"link list-group-item list-group-item-success"
data-parent="#dropdown7-2" href=
"/sport/clubs/rugby/previous-seasons/2014/draw/12th-april-2014/">
12th April 2014</a> <a class=
"link list-group-item list-group-item-success"
data-parent="#dropdown7-14" href=
"/sport/clubs/rugby/previous-seasons/2014/draw/9th-august-2014/">
9th August 2014</a> <a class=
"link list-group-item list-group-item-success"
data-parent="#dropdown7-15" href=
"/sport/clubs/rugby/previous-seasons/2014/draw/highlanders-draw-2014/">
Highlanders Draw 2014</a>
</div><a class=
"link list-group-item list-group-item-success" data-parent=
"#dropdown1-8" data-toggle="collapse" href=
"/sport/clubs/rugby/#dropdown1-8">Results <i class=
"fa fa-caret-down"></i></a>
<div class="collapse list-group-submenu" id="dropdown1-8">
<a class="link list-group-item list-group-item-success"
data-parent="#dropdown8-1" href=
"/sport/clubs/rugby/previous-seasons/2014/results-2/5th-april-2014/">
5th April 2014</a> <a class=
"link list-group-item list-group-item-success"
data-parent="#dropdown8-2" href=
"/sport/clubs/rugby/previous-seasons/2014/results-2/12th-april-2014/">
12th April 2014</a> <a class=
"link list-group-item list-group-item-success"
data-parent="#dropdown8-13" href=
"/sport/clubs/rugby/previous-seasons/2014/results-2/highlanders-points-table/">
Highlanders Points Table</a>
</div>
</div><a class="link list-group-item list-group-item-success"
data-parent="#dropdown10-2" data-toggle="collapse" href=
"/sport/clubs/rugby/#dropdown10-2">2013 <i class=
"fa fa-caret-down"></i></a>
<div class="collapse list-group-submenu" id="dropdown10-2">
<a class="link list-group-item list-group-item-success"
data-parent="#dropdown2-1" href=
"/sport/clubs/rugby/previous-seasons/2013/first-xv-2013/">First
XV 2013</a> <a class=
"link list-group-item list-group-item-success" data-parent=
"#dropdown2-7" href=
"/sport/clubs/rugby/previous-seasons/2013/under-13-2013/">Under
13 2013</a> <a class=
"link list-group-item list-group-item-success" data-parent=
"#dropdown2-8" data-toggle="collapse" href=
"/sport/clubs/rugby/#dropdown2-8">Draws <i class=
"fa fa-caret-down"></i></a>
<div class="collapse list-group-submenu" id="dropdown2-8">
<a class="link list-group-item list-group-item-success"
data-parent="#dropdown8-1" href=
"/sport/clubs/rugby/previous-seasons/2013/draws/11th-15th-may-2013/">
11th - 15th May 2013</a> <a class=
"link list-group-item list-group-item-success"
data-parent="#dropdown8-2" href=
"/sport/clubs/rugby/previous-seasons/2013/draws/18th-22nd-may-2013/">
18th - 22nd May 2013</a> <a class=
"link list-group-item list-group-item-success"
data-parent="#dropdown8-12" href=
"/sport/clubs/rugby/previous-seasons/2013/draws/24th-30th-august-2013/">
24th - 30th August 2013</a> <a class=
"link list-group-item list-group-item-success"
data-parent="#dropdown8-13" href=
"/sport/clubs/rugby/previous-seasons/2013/draws/highlanders-competition-draw/">
Highlanders Competition Draw</a>
</div><a class=
"link list-group-item list-group-item-success" data-parent=
"#dropdown2-9" data-toggle="collapse" href=
"/sport/clubs/rugby/#dropdown2-9">Results <i class=
"fa fa-caret-down"></i></a>
<div class="collapse list-group-submenu" id="dropdown2-9">
<a class="link list-group-item list-group-item-success"
data-parent="#dropdown9-1" href=
"/sport/clubs/rugby/previous-seasons/2013/results-2/11th-may-2013/">
11th May 2013</a> <a class=
"link list-group-item list-group-item-success"
data-parent="#dropdown9-10" href=
"/sport/clubs/rugby/previous-seasons/2013/results-2/10th-august-2013/">
10th August 2013</a> <a class=
"link list-group-item list-group-item-success"
data-parent="#dropdown9-11" href=
"/sport/clubs/rugby/previous-seasons/2013/results-2/17th-august-2013/">
17th August 2013</a> <a class=
"link list-group-item list-group-item-success"
data-parent="#dropdown9-12" href=
"/sport/clubs/rugby/previous-seasons/2013/results-2/24th-august-2013/">
24th August 2013</a>
</div>
</div>
</div><a class="link list-group-item list-group-item-success"
data-parent="#extra-links-section" href=
"/sport/clubs/rugby/contacts/">Contacts</a>
</div>
</div>
使用:
{$Up.Pos}-{$Pos}
获取parent的位置,使位置独一无二。
您好,我正在使用 silverstripe 创建一个站点并尝试使用 bootstrap 手风琴创建动态 sidenav,我已经使用 $Pos 为 id 和 data-parent 属性创建唯一值。
由于 $Pos 正在重置,我 运行 遇到了与列表中较早的项目具有相同 ID 和数据父值的第 3 级项目的问题。
我的代码如下:
<div id="extra-links-section" class="extra-nav">
<div class="list-group panel">
<% loop Menu(4) %>
<a class="$LinkingMode list-group-item list-group-item-success" href="<% if $Children && URLSegment != 'coaches-and-managers' %>#dropdown$Pos<% else %>$Link<% end_if %>" <% if $Children && URLSegment != 'coaches-and-managers' %>data-toggle="collapse"<% end_if %> data-parent="#extra-links-section">$Title <% if $Children && URLSegment != 'coaches-and-managers' %><i class="fa fa-caret-down"></i><% end_if %></a>
<% if $Children && URLSegment != 'coaches-and-managers' %>
<div class="collapse list-group-submenu" id="dropdown$Pos">
<% loop $Children %>
<a class="$LinkingMode list-group-item list-group-item-success" href="<% if $Children %>#dropdown$Pos<% else %>$Link<% end_if %>" <% if $Children %>data-toggle="collapse"<% end_if %> data-parent="#dropdown$Pos">$Title <% if $Children %><i class="fa fa-caret-down"></i><% end_if %></a>
<% if $Children %>
<div class="collapse list-group-submenu" id="dropdown$Pos">
<% loop $Children %>
<a class="$LinkingMode list-group-item list-group-item-success" href="<% if $Children %>#dropdown$Pos<% else %>$Link<% end_if %>" <% if $Children %>data-toggle="collapse"<% end_if %> data-parent="#dropdown$Pos">$Title <% if $Children %><i class="fa fa-caret-down"></i><% end_if %></a>
<% if $Children %>
<div class="collapse list-group-submenu" id="dropdown$Pos">
<% loop $Children %>
<a class="$LinkingMode list-group-item list-group-item-success" data-parent="#dropdown$Pos" href="$Link">$Title</a>
<% end_loop %>
</div>
<% end_if %>
<% end_loop %>
</div>
<% end_if %>
<% end_loop %>
</div>
<% end_if %>
<% end_loop %>
这个功能可以用 $Pos 实现吗?如果我没有那么多子页面,我可以看到它会起作用。我需要使用 js 才能让它起作用吗?任何有关解决方案的帮助将不胜感激。
Drawrdesign建议后的代码输出: (由于字符限制,我删除了一些 if a 标签)
<div class="extra-nav" id="extra-links-section">
<div class="list-group panel">
<a class="link list-group-item list-group-item-success"
data-parent="#extra-links-section" href=
"/sport/clubs/rugby/first-xv/">First XV</a> <a class=
"link list-group-item list-group-item-success" data-parent=
"#extra-links-section" href="/sport/clubs/rugby/second-xv/">Second
XV</a> <a class="link list-group-item list-group-item-success"
data-parent="#extra-links-section" href=
"/sport/clubs/rugby/under-16/">Under 16</a> <a class=
"link list-group-item list-group-item-success" data-parent=
"#extra-links-section" href="/sport/clubs/rugby/under-15/">Under
15</a> <a class="link list-group-item list-group-item-success"
data-parent="#extra-links-section" href=
"/sport/clubs/rugby/under-14a/">Under 14A</a> <a class=
"link list-group-item list-group-item-success" data-parent=
"#extra-links-section" href="/sport/clubs/rugby/under-14b/">Under
14B</a> <a class=
"link list-group-item list-group-item-success collapsed"
data-parent="#extra-links-section" data-toggle="collapse" href=
"/sport/clubs/rugby/#dropdown1-7">Draws <i class=
"fa fa-caret-down"></i></a>
<div class="list-group-submenu collapse" id="dropdown1-7" style=
"height: 0px;">
<a class="link list-group-item list-group-item-success"
data-parent="#dropdown7-1" href=
"/sport/clubs/rugby/draws/2nd-may-2015/">2nd May 2015</a>
<a class="link list-group-item list-group-item-success"
data-parent="#dropdown7-2" href=
"/sport/clubs/rugby/draws/9th-may-2015/">9th May 2015</a>
<a class="link list-group-item list-group-item-success"
data-parent="#dropdown7-3" href=
"/sport/clubs/rugby/draws/16th-may-2015/">16th May 2015</a>
</div><a class=
"link list-group-item list-group-item-success collapsed"
data-parent="#extra-links-section" data-toggle="collapse" href=
"/sport/clubs/rugby/#dropdown1-8">Results <i class=
"fa fa-caret-down"></i></a>
<div class="list-group-submenu collapse" id="dropdown1-8" style=
"height: 0px;">
<a class="link list-group-item list-group-item-success"
data-parent="#dropdown8-1" href=
"/sport/clubs/rugby/results-2/2nd-may-2015/">2nd May 2015</a>
<a class="link list-group-item list-group-item-success"
data-parent="#dropdown8-2" href=
"/sport/clubs/rugby/results-2/9th-may-2015/">9th May 2015</a>
</div><a class="link list-group-item list-group-item-success"
data-parent="#extra-links-section" href=
"/sport/clubs/rugby/coaches-and-managers/">Coaches and Managers</a>
<a class="link list-group-item list-group-item-success collapsed"
data-parent="#extra-links-section" data-toggle="collapse" href=
"/sport/clubs/rugby/#dropdown1-10">Previous Seasons <i class=
"fa fa-caret-down"></i></a>
<div class="list-group-submenu collapse" id="dropdown1-10" style=
"height: 0px;">
<a class="link list-group-item list-group-item-success"
data-parent="#dropdown10-1" data-toggle="collapse" href=
"/sport/clubs/rugby/#dropdown10-1">2014 <i class=
"fa fa-caret-down"></i></a>
<div class="list-group-submenu collapse in" id="dropdown10-1"
style="height: auto;">
<a class="link list-group-item list-group-item-success"
data-parent="#dropdown1-1" href=
"/sport/clubs/rugby/previous-seasons/2014/first-xv-2014/">First
XV 2014</a> <a class=
"link list-group-item list-group-item-success" data-parent=
"#dropdown1-7" data-toggle="collapse" href=
"/sport/clubs/rugby/#dropdown1-7">Draws <i class=
"fa fa-caret-down"></i></a>
<div class="collapse list-group-submenu" id="dropdown1-7">
<a class="link list-group-item list-group-item-success"
data-parent="#dropdown7-1" href=
"/sport/clubs/rugby/previous-seasons/2014/draw/5th-april-2014/">
5th April 2014</a> <a class=
"link list-group-item list-group-item-success"
data-parent="#dropdown7-2" href=
"/sport/clubs/rugby/previous-seasons/2014/draw/12th-april-2014/">
12th April 2014</a> <a class=
"link list-group-item list-group-item-success"
data-parent="#dropdown7-14" href=
"/sport/clubs/rugby/previous-seasons/2014/draw/9th-august-2014/">
9th August 2014</a> <a class=
"link list-group-item list-group-item-success"
data-parent="#dropdown7-15" href=
"/sport/clubs/rugby/previous-seasons/2014/draw/highlanders-draw-2014/">
Highlanders Draw 2014</a>
</div><a class=
"link list-group-item list-group-item-success" data-parent=
"#dropdown1-8" data-toggle="collapse" href=
"/sport/clubs/rugby/#dropdown1-8">Results <i class=
"fa fa-caret-down"></i></a>
<div class="collapse list-group-submenu" id="dropdown1-8">
<a class="link list-group-item list-group-item-success"
data-parent="#dropdown8-1" href=
"/sport/clubs/rugby/previous-seasons/2014/results-2/5th-april-2014/">
5th April 2014</a> <a class=
"link list-group-item list-group-item-success"
data-parent="#dropdown8-2" href=
"/sport/clubs/rugby/previous-seasons/2014/results-2/12th-april-2014/">
12th April 2014</a> <a class=
"link list-group-item list-group-item-success"
data-parent="#dropdown8-13" href=
"/sport/clubs/rugby/previous-seasons/2014/results-2/highlanders-points-table/">
Highlanders Points Table</a>
</div>
</div><a class="link list-group-item list-group-item-success"
data-parent="#dropdown10-2" data-toggle="collapse" href=
"/sport/clubs/rugby/#dropdown10-2">2013 <i class=
"fa fa-caret-down"></i></a>
<div class="collapse list-group-submenu" id="dropdown10-2">
<a class="link list-group-item list-group-item-success"
data-parent="#dropdown2-1" href=
"/sport/clubs/rugby/previous-seasons/2013/first-xv-2013/">First
XV 2013</a> <a class=
"link list-group-item list-group-item-success" data-parent=
"#dropdown2-7" href=
"/sport/clubs/rugby/previous-seasons/2013/under-13-2013/">Under
13 2013</a> <a class=
"link list-group-item list-group-item-success" data-parent=
"#dropdown2-8" data-toggle="collapse" href=
"/sport/clubs/rugby/#dropdown2-8">Draws <i class=
"fa fa-caret-down"></i></a>
<div class="collapse list-group-submenu" id="dropdown2-8">
<a class="link list-group-item list-group-item-success"
data-parent="#dropdown8-1" href=
"/sport/clubs/rugby/previous-seasons/2013/draws/11th-15th-may-2013/">
11th - 15th May 2013</a> <a class=
"link list-group-item list-group-item-success"
data-parent="#dropdown8-2" href=
"/sport/clubs/rugby/previous-seasons/2013/draws/18th-22nd-may-2013/">
18th - 22nd May 2013</a> <a class=
"link list-group-item list-group-item-success"
data-parent="#dropdown8-12" href=
"/sport/clubs/rugby/previous-seasons/2013/draws/24th-30th-august-2013/">
24th - 30th August 2013</a> <a class=
"link list-group-item list-group-item-success"
data-parent="#dropdown8-13" href=
"/sport/clubs/rugby/previous-seasons/2013/draws/highlanders-competition-draw/">
Highlanders Competition Draw</a>
</div><a class=
"link list-group-item list-group-item-success" data-parent=
"#dropdown2-9" data-toggle="collapse" href=
"/sport/clubs/rugby/#dropdown2-9">Results <i class=
"fa fa-caret-down"></i></a>
<div class="collapse list-group-submenu" id="dropdown2-9">
<a class="link list-group-item list-group-item-success"
data-parent="#dropdown9-1" href=
"/sport/clubs/rugby/previous-seasons/2013/results-2/11th-may-2013/">
11th May 2013</a> <a class=
"link list-group-item list-group-item-success"
data-parent="#dropdown9-10" href=
"/sport/clubs/rugby/previous-seasons/2013/results-2/10th-august-2013/">
10th August 2013</a> <a class=
"link list-group-item list-group-item-success"
data-parent="#dropdown9-11" href=
"/sport/clubs/rugby/previous-seasons/2013/results-2/17th-august-2013/">
17th August 2013</a> <a class=
"link list-group-item list-group-item-success"
data-parent="#dropdown9-12" href=
"/sport/clubs/rugby/previous-seasons/2013/results-2/24th-august-2013/">
24th August 2013</a>
</div>
</div>
</div><a class="link list-group-item list-group-item-success"
data-parent="#extra-links-section" href=
"/sport/clubs/rugby/contacts/">Contacts</a>
</div>
</div>
使用:
{$Up.Pos}-{$Pos}
获取parent的位置,使位置独一无二。