我正在尝试根据本地存储中保存的值以编程方式扩展手风琴菜单。 问题是它保存了值,我取回了值,但它没有扩展活动值。 我使用以下手风琴库:
(function(jQuery){
jQuery.fn.extend({
accordion: function() {
return this.each(function() {
var $ul = $(this);
if($ul.data('accordiated'))
return false;
$.each($ul.find('ul, li>div'), function(){
$(this).data('accordiated', true);
$(this).hide();
});
$.each($ul.find('a'), function(){
$(this).click(function(e){
activate(this);
return void(0);
});
});
var active = (location.hash)?$(this).find('a[href=' + location.hash + ']')[0]:'';
if(active){
activate(active, 'toggle');
$(active).parents().show();
}
function activate(el,effect){
$(el).parent('li').toggleClass('active').siblings().removeClass('active').children('ul, div').slideUp('fast');
$(el).siblings('ul, div')[(effect || 'slideToggle')]((!effect)?'fast':null);
}
});
}
});
})(jQuery);
我的HTML(我从C#生成菜单)+ JS:初始化可获取我之前单击的菜单/子菜单(但不扩展它们:o():
<!--MENU-->
<div id="pageWrap" class="pageWrap">
<div class="pageContent">
<ul class="accordion">
<div id="menucontent">
<li id="top1"><a href="#">ACCESORII</a>
<ul>
<li id="mid11"><a href="#">ACCESORII PENTRU LANTERNE</a>
<ul>
<li id="sub111"><a href='category.aspx?id=72'>accesorii pentru lanterne portabile</a>
</li>
</ul>
<ul>
<li id="sub112"><a href='category.aspx?id=77'>accesorii pentru lanterne industriale reincarcabile</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid12"><a href="#">BECURI DE REZERVA</a>
<ul>
<li id="sub121"><a href='category.aspx?id=67'>becuri de rezerva ambalate individual</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid13"><a href="#">PENTRU CALATORII</a>
<ul>
<li id="sub131"><a href='category.aspx?id=75'>accesorii pentru calatorii</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid14"><a href="#">PENTRU CALCULATOARE, JOCURI SI MUZICA</a>
<ul>
<li id="sub141"><a href='category.aspx?id=79'>pentru calculatoare, jocuri si muzica</a>
</li>
</ul>
</li>
</ul>
</li>
<li id="top2"><a href="#">ACUMULATORI</a>
<ul>
<li id="mid21"><a href="#">ACUMULATORI CU TEHNOLOGIA maxE (fara auto-descarcare)</a>
<ul>
<li id="sub211"><a href='category.aspx?id=80'>MARIMEA R3 (AAA)</a>
</li>
</ul>
<ul>
<li id="sub212"><a href='category.aspx?id=81'>MARIMEA R6 (AA)</a>
</li>
</ul>
<ul>
<li id="sub213"><a href='category.aspx?id=82'>MARIMEA R14 (C)</a>
</li>
</ul>
<ul>
<li id="sub214"><a href='category.aspx?id=83'>MARIMEA R20 (D)</a>
</li>
</ul>
<ul>
<li id="sub215"><a href='category.aspx?id=84'>ACUMULATORI DE 9V</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid22"><a href="#">ACUMULATORI NiMH</a>
<ul>
<li id="sub221"><a href='category.aspx?id=12'>ACUMULATORI MARIMEA R3 (Micro AAA)</a>
</li>
</ul>
<ul>
<li id="sub222"><a href='category.aspx?id=13'>ACUMULATORI MARIMEA R6 (Mignon AA)</a>
</li>
</ul>
<ul>
<li id="sub223"><a href='category.aspx?id=14'>ACUMULATORI MARIMEA R14 (Baby C)</a>
</li>
</ul>
<ul>
<li id="sub224"><a href='category.aspx?id=15'>ACUMULATORI MARIMEA R20 (Mono D)</a>
</li>
</ul>
<ul>
<li id="sub225"><a href='category.aspx?id=16'>ACUMULATORI MARIMEA 9V</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid23"><a href="#">ACUMULATORI PENTRU TELEFOANE DECT</a>
<ul>
<li id="sub231"><a href='category.aspx?id=85'>Marimea R3 (AAA)</a>
</li>
</ul>
<ul>
<li id="sub232"><a href='category.aspx?id=86'>Marimea R6 (AA)</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid24"><a href="#">AUMULATORI Ni-Zn</a>
<ul>
<li id="sub241"><a href='category.aspx?id=96'>ACUMULATORI Ni-Zn</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid25"><a href="#">EXTERN</a>
<ul>
<li id="sub251"><a href='category.aspx?id=89'>PowerBank</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid26"><a href="#">HyCell</a>
<ul>
<li id="sub261"><a href='category.aspx?id=91'>HyCell</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid27"><a href="#">PLUMB-GEL RITAR</a>
<ul>
<li id="sub271"><a href='category.aspx?id=98'>ACUMULATOR PLUMB-GEL RITAR</a>
</li>
</ul>
</li>
</ul>
</li>
<li id="top3"><a href="#">BABYCARE</a>
<ul>
<li id="mid31"><a href="#">ALARME BEBELUSI (BABYPHONE)</a>
<ul>
<li id="sub311"><a href='category.aspx?id=54'>BABYPHONE</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid32"><a href="#">LAMPI DE VEGHE SI LAMPI IN FORMA DE JUCARII</a>
<ul>
<li id="sub321"><a href='category.aspx?id=55'>lampi de veghe si lampi in forma de jucarii</a>
</li>
</ul>
</li>
</ul>
</li>
<li id="top4"><a href="#">BATERII</a>
<ul>
<li id="mid41"><a href="#">BATERII ALCALINE</a>
<ul>
<li id="sub411"><a href='category.aspx?id=4'>• BATERII RED LINE</a>
</li>
</ul>
<ul>
<li id="sub412"><a href='category.aspx?id=5'>• BATERII X-POWER</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid42"><a href="#">BATERII BUTON</a>
<ul>
<li id="sub421"><a href='category.aspx?id=6'>• BATERII BUTON ALCALINE</a>
</li>
</ul>
<ul>
<li id="sub422"><a href='category.aspx?id=7'>• BATERII BUTON LITIU</a>
</li>
</ul>
<ul>
<li id="sub423"><a href='category.aspx?id=8'>• BATERII AUDITIVE ZINC AIR</a>
</li>
</ul>
<ul>
<li id="sub424"><a href='category.aspx?id=92'>SET BATERII BUTON HyCell</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid43"><a href="#">BATERII LITIU DE MARIMI STANDARD</a>
<ul>
<li id="sub431"><a href='category.aspx?id=58'>• BATERII LITIU in blistere</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid44"><a href="#">BATERII LITIU PHOTO</a>
<ul>
<li id="sub441"><a href='category.aspx?id=59'>• BATERI LITIU pentru aplicatii foto</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid45"><a href="#">BATERII SILVER OXID</a>
<ul>
<li id="sub451"><a href='category.aspx?id=93'>BATERII BUTON SILVER OXID</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid46"><a href="#">TESTERE BATERII SI ACCESORII</a>
<ul>
<li id="sub461"><a href='category.aspx?id=9'>• TESTERE BATERII SI ACUMULATORI</a>
</li>
</ul>
</li>
</ul>
</li>
<li id="top5"><a href="#">INCARCATOARE</a>
<ul>
<li id="mid51"><a href="#">GAMA HyCell</a>
<ul>
<li id="sub511"><a href='category.aspx?id=90'>HyCell</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid52"><a href="#">INCARCATOARE CU ACUMULATORI</a>
<ul>
<li id="sub521"><a href='category.aspx?id=42'>INCARCATOARE CU ACUMULATORI</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid53"><a href="#">INCARCATOARE CU MICROPROCESOR</a>
<ul>
<li id="sub531"><a href='category.aspx?id=44'>SERIA POWERLINE</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid54"><a href="#">INCARCATOARE FARA ACUMULATORI</a>
<ul>
<li id="sub541"><a href='category.aspx?id=94'>INCARCATORI FARA ACUMULATOR</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid55"><a href="#">INCARCATOARE HIGH-TECH CU FUNCTIE DE REIMPROSPATARE</a>
<ul>
<li id="sub551"><a href='category.aspx?id=45'>seria Energy</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid56"><a href="#">INCARCATOARE MULTIMEDIA</a>
<ul>
<li id="sub561"><a href='category.aspx?id=48'>incarcator pentru acumulatori Lithiu-Ion</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid57"><a href="#">INCARCATOARE Ni-Zn</a>
<ul>
<li id="sub571"><a href='category.aspx?id=97'>INCARCATOARE Ni-Zn</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid58"><a href="#">INCARCATOARE PENTRU ACUMULATORI PB-GEL SI ACUMULATORI AUTO</a>
<ul>
<li id="sub581"><a href='category.aspx?id=49'>incarcatoare pentru baterii cu plumb cu incarcare dupa curba caracteristica IU</a>
</li>
</ul>
<ul>
<li id="sub582"><a href='category.aspx?id=50'>incarcatoare pentru baterii cu plumb cu incarcare dupa curba caracteristica IUoU</a>
</li>
</ul>
<ul>
<li id="sub583"><a href='category.aspx?id=51'>incarcatoare pentru baterii auto cu plumb sau plumb-gel</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid59"><a href="#">INCARCATOARE RAPIDE</a>
<ul>
<li id="sub591"><a href='category.aspx?id=47'>cu microprocesor pentru pachete de acumlatori</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid510"><a href="#">INCARCATOARE STANDARD</a>
<ul>
<li id="sub5101"><a href='category.aspx?id=41'>BASIC</a>
</li>
</ul>
<ul>
<li id="sub5102"><a href='category.aspx?id=46'>pentru acumulatori NiCd/NiMH</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid511"><a href="#">INCARCATOARE ULTRARAPIDE</a>
<ul>
<li id="sub5111"><a href='category.aspx?id=43'>ULTRARAPIDE</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid512"><a href="#">SERIA GLOBAL LINE</a>
<ul>
<li id="sub5121"><a href='category.aspx?id=60'>seria Global line</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid513"><a href="#">SURSE DE ALIMENTARE</a>
<ul>
<li id="sub5131"><a href='category.aspx?id=52'>surse de alimentare universale</a>
</li>
</ul>
</li>
</ul>
</li>
<li id="top6"><a href="#">LANTERNE</a>
<ul>
<li id="mid61"><a href="#">INDICATOR</a>
<ul>
<li id="sub611"><a href='category.aspx?id=71'>indicator cu lanterna</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid62"><a href="#">LANTERNE ANTI-EX</a>
<ul>
<li id="sub621"><a href='category.aspx?id=61'>lanterne industriale reincarcabile</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid63"><a href="#">LANTERNE CU CARCASA METALICA</a>
<ul>
<li id="sub631"><a href='category.aspx?id=63'>cu carcasa metalica</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid64"><a href="#">LANTERNE DE FRUNTE</a>
<ul>
<li id="sub641"><a href='category.aspx?id=57'>lanterne de frunte</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid65"><a href="#">LANTERNE DE LUCRU</a>
<ul>
<li id="sub651"><a href='category.aspx?id=95'>LANTERNE DE LUCRU</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid66"><a href="#">LANTERNE HOME DECORATION</a>
<ul>
<li id="sub661"><a href='category.aspx?id=69'>lanterne Lifestyle</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid67"><a href="#">LANTERNE INDUSTRIALE</a>
<ul>
<li id="sub671"><a href='category.aspx?id=78'>lanterne industriale reincarcabile</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid68"><a href="#">LANTERNE LASER</a>
<ul>
<li id="sub681"><a href='category.aspx?id=70'>lanterne laser (Laserpointer)</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid69"><a href="#">LANTERNE PORTABILE REINCARCABILE</a>
<ul>
<li id="sub691"><a href='category.aspx?id=65'>lanterne portabile reincarcabile (AS, ASN)</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid610"><a href="#">LANTERNE REINCARCABILE</a>
<ul>
<li id="sub6101"><a href='category.aspx?id=66'>lanterne reincarcabile</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid611"><a href="#">LANTERNE SERIA AGENT</a>
<ul>
<li id="sub6111"><a href='category.aspx?id=56'>seria AGENT</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid612"><a href="#">LANTERNE TIP BRELOC</a>
<ul>
<li id="sub6121"><a href='category.aspx?id=64'>tip breloc</a>
</li>
</ul>
</li>
</ul>
</li>
<li id="top7"><a href="#">TEHNOLOGIA ZERO WATT</a>
<ul>
<li id="mid71"><a href="#">PRIZE ECOMOMICE ZERO WATT</a>
<ul>
<li id="sub711"><a href='category.aspx?id=53'>seria AES</a>
</li>
</ul>
</li>
</ul>
</li>
</div>
</ul>
</div>
</div>
<script src="js/jquery.accordion.source.js"></script>
<script>
// <![CDATA[
$(document).ready(function() {
$('ul').accordion();
});
// ]]>
</script>
<script>
/*Main Left Menu Begin*/
var topActiveid = "";
var level1Activeid = "";
var level2Activeid = "";
$(document).ready(function() {
if (localStorage.getItem("activeLeftMenu") != null)
{
var strarray = localStorage.getItem("activeLeftMenu").split("/");
topActiveid = strarray[0].toString();
level1Activeid = strarray[1].toString();
level2Activeid = strarray[2].toString();
$(".accordion>ul>li.active").removeClass("active");
//if ($("#"+topActiveid) =! null)
$("#"+topActiveid).addClass('active');
$("#"+topActiveid).click();
$("#"+topActiveid).slideDown();
//if ($("#"+level1Activeid) =! null)
$("#"+level1Activeid).addClass('active');
$("#"+level1Activeid).click();
$("#"+level1Activeid).slideDown();
//if ($("#"+level2Activeid) =! null)
$("#"+level2Activeid).addClass('active');//$('#topx3').addClass('active'):
$("#"+level2Activeid).click();
$("#"+level2Activeid).slideDown();
// $('#menu li.active').show();
// $('#menu li.active').slideDown('normal');
}
});
</script>
<!--MENU-->
我尝试使用click(),slidedown(),show()进行扩展,但是它们都没有起作用。只是选择顶层,而无需扩展(请参见屏幕截图/我也附上了链接)。
img:Not expanding menu - screenshot
链接:Website
感谢进阶
答案 0 :(得分:1)
您必须在处理点击的 a 元素上调用.click()。
然后一切正常。
例如。
$('#top6 > a').click()
或者在您的代码中:
$("#"+topActiveid + " > a").click();
添加/删除 active 类的逻辑以及对slidedown()的调用都是不必要的。