How to create collapsable expandable menutree from

I have an xml file is like this

<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>

i want to display expandable/collapse tree structure using xsl and javascript(if necessary) with plus and minus signs;

> WORLD  |  |
>     INDIA
>           |
>           |
>            ANDHRAPRADESH
>                      |
>                      |
>                   HYDERABAD
>                   VIZAG
>                   KURNOOL
>            KARNATAKA
>                      |
>                      |
>                   BANGALORE
>                   BALLARI   
>             AUSTRALIA  
>                |
>                |
>             NEW SOUTH WALES
>                    |
>                    |
>                    PERTH
>                    BRIABANE

Is it possible simply with XSL and maybe some javascript or pure CSS?

I have a general form of this problem, though I did pinch the sample XML shown above from

Essentially I would very much like to end up with something as cool as this, but just using XSL (and a little javascript if necessary) to transform my XML document. Any ideas?

Note:I have precious little experience with XSL or javascript, I do use python a bit so if there's a python library or solution please let me know

标签： javascript css python-2.7 xslt

1条回答

啃猪蹄的小仙女

2楼-- · 2019-08-09 04:45

Assuming you want to use that code in the link you gave here is an example stylesheet that creates the nested, unordered ul list structure and simply reuses the Javascript and CSS code and images from the sample you linked to, in the real case you might want to copy the images and put them on your server:

<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>

The XML document then simply refers to above XSLT with

<?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>

0人赞添加讨论(0) 举报

How to create collapsable expandable menutree from

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间