Javascript 以编程方式展开展开手风琴
我正在尝试根据本地存储中保存的值以编程方式展开一个手风琴菜单。 问题是它保存了值，我得到了值，但它没有扩展活动值。 我使用以下手风琴库：Javascript 以编程方式展开展开手风琴,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正在尝试根据本地存储中保存的值以编程方式展开一个手风琴菜单。 问题是它保存了值，我得到了值，但它没有扩展活动值。 我使用以下手风琴库： (function(jQuery){ jQuery.fn.extend({ accordion: function() { return this.each(function() { var $ul = $(this);
(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);
<!--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-->
链接：您必须调用。单击处理单击的a元素 那么它工作得很好 例如 或者在您的代码中：
$("#"+topActiveid + " > a").click();
添加/删除活动类的逻辑以及slidedown调用都是不必要的。这将大大提高您了解问题的根本原因以及其他人仔细查看的机会=>在删除和添加“活动”类后，我认为问题出现在/*左主菜单Begin*/JS部分。在本节中，我从localStorage读取了值，将其拆分，并将类“active”添加到项中。之后，我想以某种方式扩展顶部的level1、level2菜单。我尝试了单击、向下滑动、显示，但没有一个有效。我说不出引起问题的确切线路号。我尝试在FF调试中从监视变量展开，但它不起作用。非常感谢您的快速帮助。太棒了，它工作得完美无缺。
$("#"+topActiveid + " > a").click();