Question

尝试使用引导主题构建可重用的菜单自定义控件。我想要一个手风琴布局，看起来像这样：

在真正的手风琴中，当用户选择不同的标题时，之前选择的标题＆＃34;会卷起＆＃34;。我没有卷起来。我想这不是一个大问题，但我担心如果这不起作用，那么其他东西也不会起作用。

我想知道在这种情况下在Xpages中使用dojo手风琴是否会更好？

自定义控制代码（ccMenuFinal）

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">

<div class="search-bar">
  <i class="mobile-search-icon fa fa-lg on">&#xf002;</i>
</div>

Xpage代码：

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" 
xmlns:xe="http://www.ibm.com/xsp/coreex">

<style>
    .list-group{margin-bottom:0} 
</style>    

    <xp:div styleClass="panel-group" id="accordion">

    <xp:repeat id="repeat1" var="entry" indexVar="index"
        value="#{javascript:compositeData.mnuHeading}">

            <xp:div styleClass="panel panel-default">
                <xp:div styleClass="panel-heading">
                    <h4 class="panel-title">
                        <a data-toggle="collapse"
                            data-parent="#accordion"
                            href="#{javascript:'#' + entry.MenuHeadingName}">
                            <xp:text escape="true" id="computedField1"
                                value="#{javascript:entry.MenuHeadingName}" />
                        </a>
                    </h4>
                </xp:div>


                <div id="#{javascript:entry.MenuHeadingName}"
                    class="panel-collapse collapse">

                    <ul class="list-group">
                        <xp:repeat id="repeat2" var="entry2"
                            indexVar="index2" value="#{javascript:entry.mnuTitle}">
                        <xp:link id="lnk"
                                value="#{javascript://entry2.mnuTrg}">
                                <xp:this.styleClass><![CDATA[#{javascript:if (entry2.mnuTrg == context.getUrl().getSiteRelativeAddress(context))
{"list-group-item active"}
else
{"list-group-item"}}]]></xp:this.styleClass>
                                <xp:image id="image3"
                                    style="padding-right:10.0px"
                                    url="#{javascript:entry2.mnuTtlIcn}">
                                </xp:image>
                                <xp:this.text><![CDATA[#{javascript:entry2.mnuNme}]]></xp:this.text>
                            </xp:link>
                        </xp:repeat>
                    </ul>

                </div>
            </xp:div>

    </xp:repeat>

    </xp:div>

</xp:view>

Answer 1

您发布的代码存在2个问题。

第一个是您的<xp:div styleClass="panel-group" id="accordion">

因为它是一个XP标签，id 手风琴会转换为由前缀组成的编程ID ...例如。 view:0:whatever:accordion。这会打破您的标签，不允许它们链接到面板组。将其更改为<div class="panel-group" id="accordion">

第二个是用于生成选项卡的重复控件。默认情况下，重复控件会创建自己的div。这是在您的手风琴HTML中创建外来HTML标签。重复控制有一个名为 disableOutputTag 的属性。将此设置为true，它将删除外来HTML。

Xpages：Bootstrap手风琴控件无法正常工作

1 个答案: