Question

请看js小提琴

如果您导航为 COOLDrinks ---＆gt;百事可乐---＆gt;锡

如果选择了Tin，那么我可以将100ml和200ml显示为复选框而不是Accordions吗？

硬编码也很好，我需要显示复选框来代替Accordions。

<?xml version="1.0" encoding="UTF-8"?>
<categories>
   <CoolDrinks name="Pepsi" />
   <CoolDrinks name="Thumsup" />
   <Pepsi name="Tin" />
   <Tin name="100ml" />
   <Tin name="200ml" />
   <Pepsi name="Bottle" />
   <Bottle name="1Litre" />
   <Bottle name="40Litres" />
   <Thumsup name="Pet" />
   <Pet name="25ml" />
   <Pet name="50ml" />
   <can name="70mlml" />
   <can name="00ml" />
   <Thumsup name="can" />
</categories>

Answer 1

尝试使用findInXML()中的代码，

var flag=true; // flag=true for accordians only
for (var i = 0; i < names.length; i++) {       
    // check the last child element having no tag        
    if($(xmldocu).find(names[i]).length){ 
       activateUiHTML.append("<h3><a href='#'>"+names[i]+"</a></h3><div></div>");
    } else { // if not found then make a checkbox for it
        flag=false;// no accordian
        activateUiHTML.append('<input type="checkbox"/>'+names[i]) ;
    }

 }
 // append the new html;
 var acc=activateUi.newPanel.html(activateUiHTML);
 if(flag){ // if it is not last element then only create accordian for it
      acc.find('.inner-accordion').accordion({
           heightStyle: "content",
           autoHeight: false,
           collapsible: true,
           active: false,
           activate: function (event, ui) {
               setStuff(event, ui);
           }
      });
 }

Working Demo

Answer 2

如果硬编码没问题，那么你可以检查名称[]是否包含ml/l/mlml：

if(!names[0].contains("ml")){
    var activateUiHTML = $("<div class='inner-accordion'></div>");
    for (var i = 0; i < names.length; i++) {
       activateUiHTML.append("<h3><a href='#'>" + names[i] + "</a></h3><div></div>");
    }   
   activateUi.newPanel.html(activateUiHTML).find('.inner-accordion')
                            .accordion({
                            heightStyle: "content",
                            autoHeight: false,
                            collapsible: true,
                            active: false,
                            activate: function (event, ui) {
                                setStuff(event, ui);
                            }
                        });
    }
    else{
         var activateUiHTML = $("<div class='inner'></div>");
         for (var i = 0; i < names.length; i++) {
                activateUiHTML.append("<h3><input type='checkbox' value='"+i+"'>" + names[i] + "</input></h3><div></div>");
          } 
          activateUi.newPanel.html(activateUiHTML);
           }
  }

这是Demo

如何显示复选框代替手风琴？

2 个答案: