jquery - 使用 XSLT 在 DIV 中插入纯文本

Question

我正在使用 XSLT 创建动态菜单。在一个 DIV 中，我必须放置一个不是属性的文本。

我的 XLST:

<xsl:template match="/MenuConfig">
        <div data-sidebar> <--- PROBLEM!!!
            <ul class="sidebar list-unstyled">
                <xsl:apply-templates />
            </ul>
        </div>
</xsl:template>

<xsl:template match="Menu | Item">
    <li class="{@class}">
        <a href="{@location}"><xsl:value-of select="@title"/></a>
        <xsl:if test="Item">
            <ul>
            <xsl:apply-templates select="Item" />
          </ul>
      </xsl:if>
    </li>
</xsl:template>

</xsl:stylesheet>

我的XML(只是一个例子，其实XML并不重要):

<MenuConfig>
<Menu name="name-1" location="location 1" title="Menu 1">
    <Item name="name-1.1" location="location 1.1.jsp" title="Menu 1.1"/>
    <Item name="name-1.2" location="location 1.2.jsp" title="Menu 1.2"/>
    <Item name="name-1.3" location="location 1.3.jsp" title="Menu 1.3">
        <Item name="name-1.3.1" location="location 1.3.1.jsp" title="Menu 1.3.1"/>
        <Item name="name-1.3.2" location="location 1.3.2.jsp" title="Menu 1.3.2"/>
    </Item>
    <Item name="name-1.4" location="location 1.4.jsp" title="Menu 1.3">
        <Item name="name-1.4.1" location="location 1.4.1.jsp" title="Menu 1.4.1"/>
        <Item name="name-1.4.2" location="location 1.4.2.jsp" title="Menu 1.4.2"/>
    </Item>
</Menu>

我需要的结果是这样的:

<div class="row">
        <div class="col-md-3">
            <div data-sidebar>
                <ul class="sidebar list-unstyled">
                    <li ><a href="home">Home</a></li>
                    <li ><a href="pensions/">Pensions</a></li>
                    <li ><a href="funds/">Funds</a></li>
                    <li ><a href="savings-and-investments/">Savings and Investments</a></li>
                    <li ><a href="life-insurance/">Life Insurance</a></li>
                    <li ><a href="customer-support/">Existing Customers</a></li>
                    <li ><a href="contact-u/s">Contact Us</a></li>
                    <li ><a href="about-us/">About Zurich Life</a></li>
                </ul>
            </div>
        </div>
    </div>

我需要这个 data-sidebar像这样<div data-sidebar>因为我在这个 js 函数中使用:

/**
 * Mobile dropdown sidebar
 * This will generate select with options from left menu for small and xsmall devices
 * @return {void}
 */
mobileSidebar: (function(){
  var current = '';
  return function(){
    if( !$('[data-sidebar] select').length ){
      var $select = $('<select class="sidebar form-control"/>');
      $('[data-sidebar] ul li').each(function(){
        var $this = $(this);
        var active = $(this).hasClass('active') ? 'selected' : '';
ETC...

这个JS函数是第三方公司做的，不能改。当我运行 XSLT 转换时，我收到此错误:

“与元素类型“div”关联的属性名称“data-sidebar”必须后跟'='字符”

有可能实现吗？还有另一种方法可以将此值写入 DIV 中吗？我试过使用 id="data-sidebar"但它没有用。

谢谢

Answer 1

您的 xslt 无效。改变

<div data-sidebar>

到

<div data-sidebar="">

这样，data-sidebar 将显示为一个属性(内容为空)。 JS 现在可以工作了。