Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Javascript Akordeon
Forum PHP.pl > Forum > Przedszkole
Edwinion
21.06.2010, 23:10:01
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.

Kod
<?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>


Kod
* {
  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;
}
Wiktor P.
22.06.2010, 07:37:21
http://www.zlecenia.przez.net/
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.