Javascript 如何使用XSL从XML创建可折叠、可扩展的menutree_Javascript_Css_Python 2.7_Xslt

Javascript 如何使用XSL从XML创建可折叠、可扩展的menutree

javascript css python-2.7 xslt

Javascript 如何使用XSL从XML创建可折叠、可扩展的menutree,javascript,css,python-2.7,xslt,Javascript,Css,Python 2.7,Xslt,我有一个xml文件是这样的 <WORLD> <COUNTRY COUNTRYID="INDIA"> <STATE STATEID="ANDHRAPRADESH"> <CITY>HYDERABAD</CITY> <CITY>VIZAG</CITY> <CITY>KURNOOL</CITY> </STATE> <STATE STATEID="TAMILNADU"> &l

我有一个xml文件是这样的

<WORLD>
<COUNTRY COUNTRYID="INDIA">
<STATE STATEID="ANDHRAPRADESH">
<CITY>HYDERABAD</CITY>
<CITY>VIZAG</CITY>
<CITY>KURNOOL</CITY>
</STATE>
<STATE STATEID="TAMILNADU">
<CITY>CHENNAI</CITY>
<CITY>COIMBATORE</CITY>
<CITY>SALEM</CITY>
</STATE>
<STATE STATEID="KARNATAKA">
<CITY>BANGALORE</CITY>
<CITY>MYSORE</CITY>
<CITY>BALLARI</CITY>
</STATE>
</COUNTRY>
<COUNTRY COUNTRYID="AUSTRALIA">
<STATE STATEID="NEW SOUTH WALES">
<CITY>PERTH</CITY>
<CITY>BRIABANE</CITY>
<CITY>HOBART</CITY>
</STATE>
</COUNTRY>
</WORLD>

是否可以简单地使用XSL和一些javascript或纯CSS

我有这个问题的一般形式，尽管我确实压缩了上面显示的示例XML

从本质上讲，我非常希望最终得到与之一样酷的东西，但只需要使用XSL（以及一些javascript，如果必要的话）来转换我的XML文档。有什么想法吗

注意：我在XSL或javascript方面没有什么宝贵的经验，我确实使用过python，因此如果有python库或解决方案，请让我知道

假设您想在这里提供的链接中使用该代码，这里是一个创建嵌套，无序的

ul

列表结构，并简单地重用链接到的示例中的Javascript和CSS代码以及图像，在实际情况下，您可能希望复制图像并将其放在服务器上：

<xsl:stylesheet
  version="1.0"
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:output method="html" version="5.0" indent="yes" doctype-system="about:legacy-compat"/>

<xsl:template match="/">
  <html>
    <head>
      <title>list test</title>
      <style>
/********************/
/* EXPANDABLE LIST  */
/********************/
#listContainer{
  margin-top:15px;
}

#expList ul, li {
    list-style: none;
    margin:0;
    padding:0;
    cursor: pointer;
}
#expList p {
    margin:0;
    display:block;
}
#expList p:hover {
    background-color:#121212;
}
#expList li {
    line-height:140%;
    text-indent:0px;
    background-position: 1px 8px;
    padding-left: 20px;
    background-repeat: no-repeat;
}

/* Collapsed state for list element */
#expList .collapsed {
    background-image: url(http://jasalguero.com/demos/expandableList/img/collapsed.png);
}
/* Expanded state for list element
/* NOTE: This class must be located UNDER the collapsed one */
#expList .expanded {
    background-image: url(http://jasalguero.com/demos/expandableList/img/expanded.png);
}
#expList {
    clear: both;
}

.listControl{
  margin-bottom: 15px;
}
.listControl a {
    border: 1px solid #555555;
    color: #555555;
    cursor: pointer;
    height: 1.5em;
    line-height: 1.5em;
    margin-right: 5px;
    padding: 4px 10px;
}
.listControl a:hover {
    background-color:#555555;
    color:#222222; 
    font-weight:normal;
}      
      </style>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
      <script>
/**************************************************************/
/* Prepares the cv to be dynamically expandable/collapsible   */
/**************************************************************/
function prepareList() {
    $('#expList').find('li:has(ul)')
    .click( function(event) {
        if (this == event.target) {
            $(this).toggleClass('expanded');
            $(this).children('ul').toggle('medium');
        }
        return false;
    })
    .addClass('collapsed')
    .children('ul').hide();

    //Create the button funtionality
    $('#expandList')
    .unbind('click')
    .click( function() {
        $('.collapsed').addClass('expanded');
        $('.collapsed').children().show('medium');
    })
    $('#collapseList')
    .unbind('click')
    .click( function() {
        $('.collapsed').removeClass('expanded');
        $('.collapsed').children().hide('medium');
    })

};


/**************************************************************/
/* Functions to execute on loading the document               */
/**************************************************************/
$(document).ready( function() {
    prepareList()
});      
      </script>
    </head>
    <body>
      <xsl:apply-templates/>
    </body>
  </html>
</xsl:template>

<xsl:template match="WORLD">
        <div id="listContainer">
            <div class="listControl">
                <a id="expandList">Expand All</a>
                <a id="collapseList">Collapse All</a>
            </div>
            <ul id="expList">
              <li>World
                 <xsl:apply-templates/>
              </li>
            </ul>
         </div>
</xsl:template>

<xsl:template match="COUNTRY">
  <ul>
    <li><xsl:value-of select="@COUNTRYID"/>
      <xsl:apply-templates/>
    </li>
  </ul>
</xsl:template>

<xsl:template match="STATE">
  <ul>
    <li><xsl:value-of select="@COUNTRYID | @STATEID"/>
      <ul>
        <xsl:apply-templates/>
      </ul>
    </li>
  </ul>
</xsl:template>

<xsl:template match="CITY">
  <li>
    <xsl:apply-templates/>
  </li>
</xsl:template>

</xsl:stylesheet>


列表测试
/********************/
/*可扩展列表*/
/********************/
#列表容器{
边缘顶部：15px；
}
#解说员李{
列表样式：无；
保证金：0；
填充：0；
光标：指针；
}
#外植体p{
保证金：0；
显示：块；
}
#解释程序p：悬停{
背景色：#121212；
}
#解说员李{
线高：140%；
文本缩进：0px；
背景位置：1px8px；
左侧填充：20px；
背景重复：无重复；
}
/*列表元素的折叠状态*/
#解释程序崩溃了{
背景图片：url(http://jasalguero.com/demos/expandableList/img/collapsed.png);
}
/*列表元素的展开状态
/*注意：该类必须位于折叠类下方*/
#扩展的{
背景图片：url(http://jasalguero.com/demos/expandableList/img/expanded.png);
}
#解释者{
明确：两者皆有；
}
.listControl{
边缘底部：15px；
}
.列表控件a{
边框：1px实心#555555；
颜色：#555555；
光标：指针；
高度：1.5em；
线高：1.5em；
右边距：5px；
填充：4px10px；
}
.listControl a:悬停{
背景色：#555555；
颜色：#22222；
字体大小：正常；
}      
/**************************************************************/
/*将cv准备为可动态展开/折叠*/
/**************************************************************/
函数prepareList（）{
$（“#expList”）.find（'li:has（ul）'
。单击（功能（事件）{
if（this==event.target）{
$（this.toggleClass（'expanded'）；
$（this.children（'ul'）。toggle（'medium'）；
}
返回false；
})
.addClass（'折叠'）
.children（'ul'）.hide（）；
//创建按钮功能
$（“#扩展列表”）
.unbind（'单击'）
。单击（函数（）{
$（'.collapsed'）.addClass（'expanded'）；
$（'.collapsed'）.children（）.show（'medium'）；
})
$（“#collapseList”）
.unbind（'单击'）
。单击（函数（）{
$（'.collapsed'）.removeClass（'expanded'）；
$（'.collapsed'）.children（）.hide（'medium'）；
})
};
/**************************************************************/
/*加载文档时要执行的函数*/
/**************************************************************/
$（文档）.ready（函数（）{
准备人员（）
});      
全部展开
全部崩溃

世界

然后，XML文档简单地引用上面的XSLT，并使用

<?xml-stylesheet type="text/xsl" href="sheet1.xsl"?>
<WORLD>
<COUNTRY COUNTRYID="INDIA">
<STATE STATEID="ANDHRAPRADESH">
<CITY>HYDERABAD</CITY>
<CITY>VIZAG</CITY>
<CITY>KURNOOL</CITY>
</STATE>
<STATE STATEID="TAMILNADU">
<CITY>CHENNAI</CITY>
<CITY>COIMBATORE</CITY>
<CITY>SALEM</CITY>
</STATE>
<STATE STATEID="KARNATAKA">
<CITY>BANGALORE</CITY>
<CITY>MYSORE</CITY>
<CITY>BALLARI</CITY>
</STATE>
</COUNTRY>
<COUNTRY COUNTRYID="AUSTRALIA">
<STATE STATEID="NEW SOUTH WALES">
<CITY>PERTH</CITY>
<CITY>BRIABANE</CITY>
<CITY>HOBART</CITY>
</STATE>
</COUNTRY>
</WORLD>


海得拉巴
维扎格
库努尔
钦奈
哥印拜陀
塞勒姆
班加罗尔
迈索尔
巴拉里
珀斯
布里亚班
霍巴特

<?xml-stylesheet type="text/xsl" href="sheet1.xsl"?>
<WORLD>
<COUNTRY COUNTRYID="INDIA">
<STATE STATEID="ANDHRAPRADESH">
<CITY>HYDERABAD</CITY>
<CITY>VIZAG</CITY>
<CITY>KURNOOL</CITY>
</STATE>
<STATE STATEID="TAMILNADU">
<CITY>CHENNAI</CITY>
<CITY>COIMBATORE</CITY>
<CITY>SALEM</CITY>
</STATE>
<STATE STATEID="KARNATAKA">
<CITY>BANGALORE</CITY>
<CITY>MYSORE</CITY>
<CITY>BALLARI</CITY>
</STATE>
</COUNTRY>
<COUNTRY COUNTRYID="AUSTRALIA">
<STATE STATEID="NEW SOUTH WALES">
<CITY>PERTH</CITY>
<CITY>BRIABANE</CITY>
<CITY>HOBART</CITY>
</STATE>
</COUNTRY>
</WORLD>