Question

$(document).ready(function()
{

  $.ajax({
        type:"get",
        url:"data/familytree.xml",
        dataType:"xml",
        success:function(xml)
        {
            var rootUL = $('<ul></ul>');
            $(xml).find('parent').each(function(index)                      
            {
                var prntName    = $(this).children('name').text();
                var prntGender  = $(this).children('gender').text();
                var prnt_li     = $('<li class="firstgenLi"><p class="btn_1">'+ prntName +'</p></li>');

            prnt_li.find('.btn_1').on('click',function()
            {
                if($(this).parent().find('ul').html()!=undefined)
                {
                    $(this).parent().find('.root').slideToggle('slow');
                }
            });


            rootUL.append(prnt_li);

            var subling = $(this).children('descendent').children('sibling').length;

            if(subling>0)
            {
                var subUL = $('<ul class="root"></ul>')
                prnt_li.append(subUL);

                $(this).children('descendent').children('sibling').each(function(index)
                {
                    var gen2_name   = $(this).children('name').text();
                    var gen2_li     = $('<li class="secondGenLi"><p class="btn_2">'+ gen2_name +'</p></li>');

                    gen2_li.find('.btn_2').on('click',function()
                    {
                        if($(this).parent().find('ul').html()!=undefined)
                        {
                            $(this).parent().find('ul').slideToggle();
                        }
                    });

                    subUL.append(gen2_li);

                    var subling2 = $(this).children('descendent').children('sibling').length;

                    if(subling2>0)
                    {
                        var subUL2 = $('<ul></ul>')
                        gen2_li.append(subUL2);

                        $(this).children('descendent').children('sibling').each(function()
                        {
                            var gen3_name   = $(this).children('name').text();
                            var gen3_li     = $('<li class="thirdGenLi"><p>'+ gen3_name +'</p></li>');
                            subUL2.append(gen3_li);
                        });
                    }

                });
            }
        });
        $('body').append(rootUL);
    },
 });


});

Answer 1

您可以使用ddaccordion.js jquery插件来获取它。像这样的东西

<head> <script src="yourPath/ddaccordion.js"> </script>

   <script type="text/javascript">

   ddaccordion.init({
               headerclass: "submenuheader", //Shared CSS class name of headers group
               contentclass: "submenu", //Shared CSS class name of contents group
               revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or
   "mouseover"
               mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
               collapseprev: true, //Collapse previous content (so only one open at any time)? true/false 
               defaultexpanded: [], //index of content(s) open by default [index1, index2, etc] [] denotes no content
               onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
               animatedefault: false, //Should contents open by default be animated into view?
               persiststate: true, //persist state of opened contents within browser session?
               toggleclass: ["", ""], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1",
   "class2"]
               togglehtml: ["suffix", "<img src='content/images/arrow_up.png' class='statusicon' />", "<img
   src='content/images/arrow_down.png' class='statusicon' />"],
   //Additional HTML added to the header when it's collapsed and
   expanded, respectively  ["position", "html1", "html2"] (see docs)
               animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
               oninit: function (headers, expandedindices) { //custom code to run when headers have initalized
                   //do nothing
               },
               onopenclose: function (header, index, state, isuseractivated) { //custom code to run whenever a header is opened
   or closed
                   //do nothing
               }
           })

   </script> </head> <body> <a class="submenuheader"
   href="javascript:;">Panel 1</a> <div class="submenu">Content for
   panel 1</div> <a class="submenuheader" href="javascript:;">Panel
   2</a> <div class="submenu">Content for panel 2</div> <a
   class="submenuheader" href="javascript:;">Panel 3</a> <div
   class="submenu">Content for panel 3</div> </body>

jQuery多个兄弟节目一次只隐藏一个

1 个答案: