16 svar · 1 286 visningar · startad av Renegade8164
Hej, jag håller på med ett blogg-system och har fastnat i class="active" på mina menyer samt undermenyer. Javascript/CSS/HTML funkar som det ska, men jag måste kunna skriva ut class="active" beroende på vilken sida jag är inne på och inte manuellt.
Jag använder mig utav en drop-down meny, så jag behöver class="active" på <li>-taggen också, vilket har skapat mig stora problem som jag inte vet hur ja ska gå till väga. (Jag har funderat på PHP-lösningar, men vill hålla min html-kod (template) så ren som möjligt.)
Här är den koden jag använder mig utav;
admin_head.tpl
...
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.js"></script>
<script>
$(document).ready(function () {
InitMenuEffects ();
});
function InitMenuEffects () {
/* Sliding submenus */
$('.sidebar .menu ul ul').hide();
$('.sidebar .menu ul li.active ul').show();
$('.sidebar .menu ul li').click(function () {
submenu = $(this).find('ul');
if (submenu.is(':visible'))
submenu.slideUp(150);
else
submenu.slideDown(200);
return false;
});
}
</script>
</head>
....
admin_sidebar.tpl (med class="active" inskrivet manuellt)
...
<div class="sidebar">
<div class="menu">
<ul>
<li>
<a href="#">{username}</a>
<ul>
<li><a href="profile.php">{lang_manage_profile}</a></li>
<li><a href="account.php">{lang_manage_account}</a></li>
</ul>
</li>
<li class="active">
<a href="#">{lang_administration}</a>
<ul>
<li class="active"><a href="admin.php">{lang_overview}</a></li>
<li><a href="stats.php">{lang_stats}</a></li>
<li><a href="notes.php">{lang_notes}</a></li>
</ul>
</li>
</ul>
</div>
</div>
...
hur ser den genererade HTML koden ut? för det är inget fel på din html kod.
det du saknar kan jag tänka mig att du vill plocka bort active på:
$('.sidebar .menu ul li').click(function () {
Antingen sparar du undan $('.sidebar .menu ul li'), som en variabel innan click-eventet och removeClass("active") på kollektionen och sedan ta $(this).addClass("active").
Den HTML-koden är exakt som den jag skrev men utan class="active" på de två <li>-taggarna.
Jag försökte på så som du sa, men gick inget vidare för mig. Antingen markerades hela menyer eller så markerades bara när jag klickade på <li>.
Kan vart så att jag skrev koden helt fel, då jag e inte så smart på js.
vänta nu.. är det när du trycker på exempelvis stats så skall den + noderna upp få klassen active?
För att beskriva det mer grafiskt tog jag printscreens på menyn. hm..
1. När sidan Overview (admin.php) är laddad ska det se ut så här när class="active" på båda <li>;
2. Jag kan tycka på meny-namnet (Administration) och då åker den upp och ser nu ut såhär;
3. Sen när jag vill se en annan eller flera menyer kan jag göra det (<li> utan class="active").
vad jag kan se ( http://jsbin.com/alira3/ ) så gör den ju redan det du vill att den skall göra. eller du vill att {username} också skall bli vit markerad(vit markerad bara om den är expanderad?
Ja JS animerar rätt o så. Men jag har ju fortfarande problem med att få class="active" på rätta länkar
på bild 2, när den är "inne" skall den plocka bort "active" klassen? förlåt, men jag måste vara trög, för jag kopplar inte bilderna mot vad din kod inte gör.
På bild 2 fälls menyn ihop, men är fortfarande active
På bild 2 fälls menyn ihop, men är fortfarande active
Det skall den inte vara då?
kolla på clicket och kör:
if($(this).hasClass("active")) { $(this).removeClass("active") }
eller: http://jsbin.com/alira3/3/
Det löste inte mitt problem, det var lite fel. Jag vill att Javascript fattar att när jag går till ex; "minblogg.se/admin/profile.php". Så ska den list-item (<li><a href="profile.php"></a></li>) som innehåller länk till "profile.php" sättas class="active" på <li>-taggen, samt sätta class="active" på <li>-taggen på övermenyn.
Om jag går till profile.php ska koden bli såhär:
...
<div class="sidebar">
<div class="menu">
<ul>
<li class="active">
<a href="#">{username}</a>
<ul>
<li class="active"><a href="profile.php">{lang_manage_profile}</a></li>
<li><a href="account.php">{lang_manage_account}</a></li>
</ul>
</li>
<li>
<a href="#">{lang_administration}</a>
<ul>
<li><a href="admin.php">{lang_overview}</a></li>
<li><a href="stats.php">{lang_stats}</a></li>
<li><a href="notes.php">{lang_notes}</a></li>
</ul>
</li>
</ul>
</div>
</div>
...
om jag går till account.php ska koden bli såhär:
...
<div class="sidebar">
<div class="menu">
<ul>
<li class="active">
<a href="#">{username}</a>
<ul>
<li><a href="profile.php">{lang_manage_profile}</a></li>
<li class="active"><a href="account.php">{lang_manage_account}</a></li>
</ul>
</li>
<li>
<a href="#">{lang_administration}</a>
<ul>
<li><a href="admin.php">{lang_overview}</a></li>
<li><a href="stats.php">{lang_stats}</a></li>
<li><a href="notes.php">{lang_notes}</a></li>
</ul>
</li>
</ul>
</div>
</div>
...
Om jag går till stats.php ska koden bli såhär:
...
<div class="sidebar">
<div class="menu">
<ul>
<li>
<a href="#">{username}</a>
<ul>
<li><a href="profile.php">{lang_manage_profile}</a></li>
<li><a href="account.php">{lang_manage_account}</a></li>
</ul>
</li>
<li class="active">
<a href="#">{lang_administration}</a>
<ul>
<li><a href="admin.php">{lang_overview}</a></li>
<li class="active"><a href="stats.php">{lang_stats}</a></li>
<li><a href="notes.php">{lang_notes}</a></li>
</ul>
</li>
</ul>
</div>
</div>
...
...
kolla bara vad din location.href är just nu och se om du kan matchar den med $("a[href='"+location.href+"']")
okej... hur gör jag det?
function findLink() {
$(".menu a").each(function() {
if (this.href===location.href) {
$(this).parents("li").addClass("active");
}
});
}
Och kör funktionen innan du kör din InitMenuEffects()
Tack :D
Men nu fick jag ett nytt problem...
När jag trycker på länkarna refereras jag inte. Ex; om jag klickar på "Manage Profile", som länkar till profile.php så händer det inget. Hm.
det är ju din kod som gör det, du kör return false på alla dina a-element:
function InitMenuEffects () {
/* Sliding submenus */
$('.sidebar .menu ul ul').hide();
$('.sidebar .menu ul li.active ul').show();
$('.sidebar .menu ul li>a').click(function () {
submenu = $(this).find('ul');
if (submenu.is(':visible'))
submenu.slideUp(150);
else
submenu.slideDown(200);
return false;
});
}
eller bara plocka bort return false; eftersom dina andra länkar är "#"