Podstrony
- telcocafe
- [JavaScript] Problem z Lytebox mały problem z przyciskiem "Next"
- [JavaScript] brak polskich znaków skrypt nie wyświetla wszystkich polskich znaków
- [JS] Wyświetlanie obrazków w danym dniu jak za pomocą javaScript wyświetlać obrazki
- [javascript] Odświeżanie ramki z innej ramki
- [javascript]Lightbox Problem z wyświetlaniem obrazów w lightboxie
- [javascript] Ustawienia drukowania Czy da się drukować w poziomie?
- [xml/js]Parsowanie xml w javascript
- [Javascript] Dodawanie strony do 'ulubionych'
- ciasteczka JavaScript jak je odebrać JavaScript nie widzi mojego ciasteczka:/
- [PHP, JavaScript] Funkcja JS wywoływana z PHP
- zanotowane.pl
- doc.pisz.pl
- pdf.pisz.pl
- wrobelek.opx.pl
telcocafe
Witam, mam problem z kodem javascrpit, posiadam akordeon 2 poziomowy jednak jest pewien problem, chcialbym zeby gdy klikne to samo pole dwa razy lista nie rozwijala sie ponownie, tzn zeby rozwijala sie tylko jeden raz dla tego samego elementu. Zamieszczam kod html i css.<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="pl" xml:lang="pl"> <head> <title>Javascript</title> <meta http-equiv="Content-Type" content="text/html" charset="utf-8" /> <link rel="stylesheet" type="text/css" href="style.css" /> <script type="text/javascript" src="jquery.js"></script> <script src="jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $("a.stopien").each(function(){ $(this).click(function(){ $(".zawartosc").each(function(){ $(this).hide("fast"); }); $("#"+$(this).attr("title")).show("fast"); }); }); }); $(function(){ $("a.ponizej").each(function(){ $(this).click(function(){ $(".ponizejzaw").each(function(){ $(this).hide("fast"); }); $("#"+$(this).attr("title")).show("fast"); }); }) ;}); </script> </head> <body> <div class="akordeon"> <a id="powrot" class="stopien">Powrot</a> <a class="stopien" title="1stopien">Pierwsza lista</a> <div class="zawartosc" id="1stopien"> <ul> <li> <a class="ponizej" href="#" title="1ponizej">Poziom 1</a> <div class="ponizejzaw" id="1ponizej"> <ul> <li><a href="#" title="">Poziom 2</a></li> <li><a href="#" title="">Poziom 2a</a></li> <li><a href="#" title="">Poziom 2b</a></li> </ul> </div> </li> <li> <a class="ponizej" href="#" title="2ponizej">Poziom 1a</a> <div class="ponizejzaw" id="2ponizej"> <ul> <li><a href="#" title="">Poziom 2</a></li> <li><a href="#" title="">Poziom 2a</a></li> <li><a href="#" title="">Poziom 2b</a></li> </ul> </div> </li> <li> <a class="ponizej" href="#" title="3ponizej">Poziom 1b</a> <div class="ponizejzaw" id="3ponizej"> <ul> <li><a href="#" title="">Poziom 2</a></li> <li><a href="#" title="">Poziom 2a</a></li> <li><a href="#" title="">Poziom 2b</a></li> </ul> </div> </li> <li> <a class="ponizej" href="#" title="4ponizej">Poziom 1c</a> <div class="ponizejzaw" id="4ponizej"> <ul> <li><a href="#" title="">Poziom 2</a></li> <li><a href="#" title="">Poziom 2a</a></li> <li><a href="#" title="">Poziom 2b</a></li> </ul> </div> </li> <li> <a class="ponizej" href="#" title="5ponizej">Poziom 1d</a> <div class="ponizejzaw" id="5ponizej"> <ul> <li><a href="#" title="">Poziom 2</a></li> <li><a href="#" title="">Poziom 2a</a></li> <li><a href="#" title="">Poziom 2b</a></li> </ul> </div> </li> </ul> </div> <a class="stopien" title="2stopien">Druga lista</a> <div class="zawartosc" id="2stopien"> <ul> <li> <a class="ponizej" href="#" title="6ponizej">Poziom 1</a> <div class="ponizejzaw" id="6ponizej"> <ul> <li><a href="#" title="">Poziom 2</a></li> <li><a href="#" title="">Poziom 2a</a></li> <li><a href="#" title="">Poziom 2b</a></li> </ul> </div> </li> <li> <a class="ponizej" href="#" title="7ponizej">Poziom 1a</a> <div class="ponizejzaw" id="7ponizej"> <ul> <li><a href="#" title="">Poziom 2</a></li> <li><a href="#" title="">Poziom 2a</a></li> <li><a href="#" title="">Poziom 2b</a></li> </ul> </div> </li> <li><a class="ponizej" href="#" title="8ponizej">Poziom 1b</a> <div class="ponizejzaw" id="8ponizej"> <ul> <li><a href="#" title="">Poziom 2</a></li> <li><a href="#" title="">Poziom 2a</a></li> <li><a href="#" title="">Poziom 2b</a></li> </ul> </div> </li> </ul> </div> </div> </body> </html>
* { margin: 0; padding: 0; } a { color: black; text-decoration: none; border: 1px solid black; background: silver; color: blue; } .akordeon { width: 200px; margin: 100px 0 0 300px; text-align: center; } .stopien { display: block; padding: 8px 0 8px 15px; cursor: pointer; color: lightblue; font: 10pt 'Verdana'; background: gray; } .zawartosc { display: none; } ul { width: 100%; display: block; list-style: none; } ul li a { width: 173px; display: block; padding: 8px 0 8px 25px; font: 8pt 'Arial'; } ul li a:hover { color: red; width: 170px; padding: 8px 0 8px 30px; } .ponizej { display: block; cursor: pointer; } #1podstopien ul { width: 100%; display: block; } #1podstopien ul li a, #2podstopien ul li a{ width: 155px; display: block; padding: 8px 0 8px 45px; background: #848484; font: 7pt 'Tahoma'; } .ponizejzaw{ display: none; background: black; padding-left: 20px; }
$(function() { $('a.stopien').click(function() { $('.zawartosc').not($(this).next()).hide('fast'); $(this).next().show('fast'); }); $('a.ponizej').click(function() { $('.ponizejzaw').not($(this).next()).hide('fast'); $(this).next().show('fast'); }); });Coś takiego?
$(function() { $('a.stopien').click(function() { $('.zawartosc').not($(this).next()).hide('fast'); $(this).next().show('fast'); }); $('a.ponizej').click(function() { $('.ponizejzaw').not($(this).next()).hide('fast'); $(this).next().show('fast'); }); });Coś takiego?
Swietnie, o to mi chodzilo, wielkie dzieki !!!