- Home
- Categorie
- Coding e Sistemistica
- Javascript & Framework
- jquery - problema menu accordion
-
jquery - problema menu accordion
Ciao sto realizzando un sito, ma ho un problema col menu accordion, vorrei che una volta cliccatoci sopra rimanesse in memoria quale tab è stato aperto, il codice del menu è questo:
** <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Accordion</title> <script src="menu/js/jquery-1.2.1.min.js" type="text/javascript"></script> <script> function initMenu() { $('#accordion ul').hide(); $('#accordion ul:first').hide(); $('#accordion li a').click( function() { var checkElement = $(this).next(); if((checkElement.is('ul')) && (checkElement.is(':visible'))) { return false; } if((checkElement.is('ul')) && (!checkElement.is(':visible'))) { $('#accordion ul:visible').slideUp('normal'); checkElement.slideDown('normal'); return false; } } ); } $(document).ready(function() {initMenu();}); </script> <style> /* First Level UL List */ #accordion { margin:0; padding:0; list-style:none; } li { width:189px; } li a { display: block; width: 190px; height: 30px; text-indent:-999em; outline:none; } /* Using CSS Sprite for menu item */ li a.home { background:url(menu/01.jpg) no-repeat 0 0; } li a.home:hover, .popularOver { background:url(menu/01.jpg) no-repeat -190px 0 !important; } li a.info { background:url(menu/02.jpg) no-repeat 0 0; } li a.info:hover, .popularOver { background:url(menu/02.jpg) no-repeat -190px 0 !important; } li a.eventi { background:url(menu/03.jpg) no-repeat 0 0; } li a.eventi:hover, .popularOver { background:url(menu/03.jpg) no-repeat -190px 0 !important; } li a.community { background:url(menu/06.jpg) no-repeat 0 0; } li a.community:hover, .popularOver { background:url(menu/06.jpg) no-repeat -190px 0 !important; } li a.fazioni { background:url(menu/07.jpg) no-repeat 0 0; } li a.fazioni:hover, .popularOver { background:url(menu/07.jpg) no-repeat -190px 0 !important; } li a.regolamenti { background:url(menu/08.jpg) no-repeat 0 0; } li a.regolamenti:hover, .popularOver { background:url(menu/08.jpg) no-repeat -190px 0 !important; } li a.campagna { background:url(menu/09.jpg) no-repeat 0 0; } li a.campagna:hover, .popularOver { background:url(menu/09.jpg) no-repeat -190px 0 !important; } li a.iscrizione { background:url(menu/05.jpg) no-repeat 0 0; } li a.iscrizione:hover, .popularOver { background:url(menu/05.jpg) no-repeat -190px 0 !important; } li a.links { background:url(menu/12.jpg) no-repeat 0 0; } li a.links:hover, .popularOver { background:url(menu/12.jpg) no-repeat -190px 0 !important; } li a.gallery { background:url(menu/04.jpg) no-repeat 0 0; } li a.gallery:hover, .popularOver { background:url(menu/04.jpg) no-repeat -190px 0 !important; } li a.shop { background:url(menu/11.jpg) no-repeat 0 0; } li a.shop:hover, .popularOver { background:url(menu/11.jpg) no-repeat -190px 0 !important; } li a.sponsor { background:url(menu/10.jpg) no-repeat 0 0; } li a.sponsor:hover, .popularOver { background:url(menu/10.jpg) no-repeat -190px 0 !important; } /* Second Level UL List*/ ul { background:url(menu/bg.png) repeat-y 0 0; width:190px; margin:0; padding:0; display:none; } ul li { height:30px; } /* styling of submenu item */ ul li a { width:180px; height:28px; margin-left:15px; padding-top:5px; border-bottom: 1px dotted #777; text-indent:0; color:#ccc; text-decoration:none; } /* remove border bottom of the last item */ ul li a.last { border-bottom: none; } </style> </head> <body> <ul id="accordion"> <li> <a href="index.php" class="item home" rel="home">Home</a> </li> <li> <a href="#" class="item info" rel="info">Info</a> <ul> <li><a href="index.php/gli-eventi">Gli Eventi</a></li> <li><a href="index.php/cose-il-larp">Cos'è il LARP?</a></li> <li><a href="index.php/contatti">Contatti</a></li> <li><a href="index.php/come-arrivare">Come Arrivare</a></li> <li><a href="index.php/il-nostro-pensiero" class="last">Il nostro pensiero</a></li> </ul> </li> <li><a href="#" class="item eventi" rel="eventi">Gli Eventi</a> <ul> <li><a href="index.php/battle-for-vilegis-2013">Battle for Vilegis 2013</a></li> <li><a href="index.php/echoes-of-war-2013">Echoes of War 2013</a></li> <li><a href="#" class="last">_______</a></li> </ul> </li> <li> <a href="index.php/gallery-2" class="item gallery" rel="gallery">Gallery</a> <ul> <li><a href="index.php/fan-art" class="last">Fan Art</a></li> </ul> </li> <li> <a href="#" class="item iscrizione" rel="iscrizione">Iscrizione</a> <ul> <li><a href="index.php/personaggi">Personaggi</a></li> <li><a href="index.php/new-player">New Player</a></li> <li><a href="index.php/tende-in-game">Tende In Game</a></li> <li><a href="index.php/nexus">Nexus</a></li> <li><a href="index.php/stand-commerciali">Stand Commerciali</a></li> <li><a href="index.php/visitatori" class="last">Visitatori</a></li> </ul> </li> <li> <a href="#" class="item community" rel="community">Community</a> <ul> <li><a href="index.php/articoli">Articoli & Rubriche</a></li> <li><a href="index.php/fb-official-page">FB Official Page</a></li> <li><a href="index.php/social-network">Social Networks</a></li> </ul> </li> <li> <a href="index.php/fazioni" class="item fazioni" rel="fazioni">Fazioni</a> <ul> <li><a href="index.php/altea">Altea</a></li> <li><a href="index.php/brandis">Brandis</a></li> <li><a href="index.php/radiant">Radiant</a></li> <li><a href="index.php/soldraconis">Soldraconis</a></li> <li><a href="index.php/nexus" class="last">Nexus</a></li> </ul> </li> <li> <a href="#" class="item regolamenti" rel="regolamenti">Regolamenti</a> <ul> <li><a href="index.php/intro">Introduzione</a></li> <li><a href="index.php/manuale-di-gioco">Manuale di Gioco</a></li> <li><a href="index.php/manuale-accademie">Manuale delle Accademie</a> <li><a href="index.php/guida-dei-materiali" class="last">Guida dei Materiali</a></li> </ul> </li> <li> <a href="#" class="item campagna" rel="campagna">Campagna</a> <ul> <li><a href="index.php/b4v-concept">B4V Concept</a></li> <li><a href="index.php/eventi-recenti">Eventi recenti</a></li> <li><a href="index.php/cronistoria-di-vilegis">Cronistoria di Vilegis</a></li> <li><a href="index.php/casate">Le Casate</a></li> <li><a href="index.php/accademie">Le Accademie</a></li> <li><a href="index.php/pantheon">Il Pantheon</a></li> <li><a href="index.php/storia-re">Storia di un Re</a></li> <li><a href="index.php/background-gruppi" class="last">Background Gruppi</a></li> </ul> </li> <li> <a href="#" class="item sponsor" rel="sponsor">Sponsor</a> <ul> <li><a href="index.php/mytholon">Mytholon</a></li> <li><a href="index.php/bc">BC</a></li> <li><a href="index.php/imperat">Imperat</a></li> <li><a href="index.php/fucina-del-drago">La Fucina del Drago</a></li> <li><a href="index.php/parche">Le Parche</a></li> <li><a href="index.php/leather-lab">Leather Lab</a></li> <li><a href="index.php/narsilion">Narsilion</a></li> <li><a href="index.php/iron-ring" class="last">The Iron Ring</a></li> </ul> </li> <li> <a href="#" class="item shop" rel="shop">B4V Shop</a> <ul> <li><a href="index.php/shirt">T-shirt</a></li> <li><a href="index.php/photo-album" class="last">Photo album</a></li> </ul> </li> <li> <a href="index.php/links" class="item links" rel="links">Links</a> </li> </ul> </body> </html>**
Inoltre vorrei anche che le categorie gallery e fazioni al click aprissero una pagina nella stessa finestra del browser e il menu rimanesse aperto con le loro sottocategorie in vista.
Spero di essere riuscito a farmi capire.
Grazie in anticipo a chi sapra' aiutarmi