how to assign a link to a branch in the xml so that it opens once i click on it in the output of the html

问题

This code converts an xml file to an html expandable tree:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
      $.ajax({
        url: "stations10.xml",
        success: function(tree) {
          traverse($('#treeView li'), tree.firstChild)
            // this – is an &mdash;
          $('#treeView li:has(li)').addClass("Max").click(function(e) {
            $(this).toggleClass("Max Min");
            $(this).children().toggle();
            e.stopPropagation();
          })
          $('#treeView li').click(function(g) {

            var mytree2 = $(this);
            mytree2.children('li').toggle();

            g.stopPropagation();
          })

          $('<b></b>').prependTo('#treeView li:has(li)').click(function() {
            var sign = $(this).text()
            if (sign == "–")
              $(this).text('').next().children().hide()
            else
              $(this).text('').next().children().show()
          })
        }
      })
    });

    function traverse(node, tree) {
      var children = $(tree).children()
      node.addClass(tree.nodeName).append(tree)
      if (children.length) {
        var ul = $("<ul>").appendTo(node)
        children.each(function() {
          var li=$('<li>').appendTo(ul)
          traverse(li, this)
        })
      } else {
        $('<ul><li>' + $(tree).text() + '<\/li><\/ul>')
      }
    }
  </script>
    <style type="text/css">
    #treeView li {
      list-style: none;
    }

    #treeView ul {
      padding-left: 1em;
    }

    #treeView b {
      padding-right: 1em;
    }

    .Min {
      background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/plus_zps8o4adn0e.gif") no-repeat;
      padding-left: 15px;
    }

    .Max {
      background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/minus_zpsk0jlvbaa.gif") no-repeat;
      padding-left: 15px;
    }

    li {
      background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/bullet_zpsblghj3ip.gif") no-repeat;
      padding-left: 15px;
    }

    .MainStation.Max {
      background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/station_zpswxz6gpqe.jpg") no-repeat;
      background-size: 15px 15px;
      cursor: pointer;
      padding-left: 15px;
    }
    .Substation.Max {
      background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/sub_zpsspl8dckt.jpg") no-repeat;
      background-size: 15px 15px;
      cursor: pointer;
      padding-left: 15px;
    }
    .Control.Max {
      background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/control_zpsrfvdzyzp.jpg") no-repeat;
      background-size: 15px 15px;
      cursor: pointer;
      padding-left: 15px;
    }
    .PushButton.Max {
      background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/pusbutton_zpsspjfsfsp.jpg") no-repeat;
      background-size: 15px 15px;
      cursor: pointer;
      padding-left: 15px;
    }
    .ElectricStation.Max {
      background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/electrical-safety-symbol_zpssdvscba0.gif") no-repeat;
      background-size: 15px 15px;
      cursor: pointer;
      padding-left: 15px;
    }
  </style>
    <title>treeView</title>
  </head>

  <body>
    <ul id="treeView">
      <li></li>
    </ul>
  </body>

</html>

This is the XML file:

<?xml version="1.0" encoding="UTF-8"?>
<MAIN xmlns:xlink="http://www.w3.org/1999/xlink"> MAIN
<MainStation 
        xlink:type="extended" 
        xlink:href="http://google.com"
        xlink:show="new"> Mainstation1
    <Substation> Substation1
        <Control>Control1</Control>
        <Control>Control2<MiniControl>MiniControl1</MiniControl><MiniControl>MiniControl2</MiniControl></Control>
        <PushButton>PushButton1</PushButton>
    </Substation>
    <Substation> Substation2
        <Control>Control1<MiniControl>MiniControl1</MiniControl><MiniControl>MiniControl2</MiniControl></Control>
        <Control>Control2</Control>
        <PushButton>PushButton1</PushButton>
    </Substation>
    <Substation> Substation3
        <Control>Control1</Control>
        <Control>Control2</Control>
        <Control>Control3</Control>
        <Control>Control4</Control>
    </Substation>
    <Substation> Substation4
        <PushButton>PushButton1</PushButton>
        <PushButton>PushButton2</PushButton>
    </Substation>
</MainStation>  
<MainStation> Mainstation2
    <Substation> Substation1
        <Control>Control1</Control>
        <Control>Control2</Control>
        <PushButton>PushButton1</PushButton>
    </Substation>
    <Substation> Substation2
        <Control>Control1<MiniControl>MiniControl1</MiniControl><MiniControl>MiniControl2</MiniControl></Control>
        <Control>Control2</Control>
        <PushButton>PushButton1<MiniPushButton>MiniPushButton1</MiniPushButton><MiniPushButton>MiniPushButton2</MiniPushButton></PushButton>
    </Substation>
</MainStation>  
<ElectricStation> ElectricStation1
    <Substation> Substation1
        <Control>Control1</Control>
        <Control>Control2</Control>
        <PushButton>PushButton1</PushButton>
    </Substation>
    <Substation> Substation2
        <Control>Control1<MiniControl>MiniControl1</MiniControl><MiniControl>MiniControl2</MiniControl></Control>
        <Control>Control2</Control>
        <PushButton>PushButton1<MiniPushButton>MiniPushButton1</MiniPushButton><MiniPushButton>MiniPushButton2</MiniPushButton></PushButton>
    </Substation>
</ElectricStation>  
</MAIN>

As you can see, I tried linking the main station node to Google so that when I click on it in the output, it opens Google. However it's not working.

回答1:

You may have to change the script for expanding.

Here is one way you could do it. I have appended a span tag, this is to display the images. I have added the click handler to collapse and expand to this. So you will have to click exactly on the image to expand or collapse the list. The second handler is for the tags with href attribute. On click of the list with the href attribute it will redirect to the link location.

Note: I have changed the xlink:href attribute in the XML to just href.

[EDIT]

Full code

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $.ajax({
                    url: "stations10.xml",
                    success: function(tree) {
                        traverse($('#treeView li'), tree.firstChild)
                        $('<span><\/span>').addClass("Max").prependTo('#treeView li:has(li)')
                        $('.Max,.Min').click(function (e) {
                            $(this).toggleClass("Max Min")
                            $(this).siblings().next().toggle()
                        });
                        $("[href]").click(function(){
                            window.location.href = $(this).attr("href")
                        });
                    }
                })
            });

            function traverse(node, tree) {
                var children = $(tree).children()
                node.addClass(tree.nodeName).append(tree)
                if (children.length) {
                    var ul = $("<ul>").appendTo(node)
                    children.each(function() {
                        var li=$('<li>').appendTo(ul)
                        traverse(li, this)
                    })
                } else {
                    $('<ul><li>' + $(tree).text() + '<\/li><\/ul>')
                }
            }
        </script>
        <style type="text/css">
        #treeView li {
            list-style: none;
        }

        #treeView ul {
        padding-left: 1em;
        }

        #treeView b {
            padding-right: 1em;
        }

        .Min {
            background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/plus_zps8o4adn0e.gif") no-repeat;
            padding-left: 30px;
        }

        .Max {
            background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/minus_zpsk0jlvbaa.gif") no-repeat;
            padding-left: 30px;
        }

        li {
            background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/bullet_zpsblghj3ip.gif") no-repeat;
            padding-left: 30px;
        }

        .MainStation.Max {
            background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/station_zpswxz6gpqe.jpg") no-repeat;
            background-size: 15px 15px;
            cursor: pointer;
            padding-left: 30px;
        }
        .Substation.Max {
          background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/sub_zpsspl8dckt.jpg") no-repeat;
          background-size: 15px 15px;
          cursor: pointer;
          padding-left: 30px;
        }
        .Control.Max {
          background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/control_zpsrfvdzyzp.jpg") no-repeat;
          background-size: 15px 15px;
          cursor: pointer;
          padding-left: 30px;
        }
        .PushButton.Max {
          background:     URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/pusbutton_zpsspjfsfsp.jpg") no-repeat;
          background-size: 15px 15px;
          cursor: pointer;
          padding-left: 30px;
        }
        .ElectricStation.Max {
          background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/electrical-safety-symbol_zpssdvscba0.gif") no-repeat;
          background-size: 15px 15px;
          cursor: pointer;
          padding-left: 30px;
        }
        </style>
        <title>treeView</title>
    </head>
    <body>
        <ul id="treeView">
          <li></li>
        </ul>
    </body>
    </html>

The change in XML code

<MainStation 
        xlink:type="extended" 
        href="http://google.com"
        xlink:show="new"> Mainstation1
        ....

来源：https://stackoverflow.com/questions/31828159/how-to-assign-a-link-to-a-branch-in-the-xml-so-that-it-opens-once-i-click-on-it

标签

html

xml

hyperlink