2016-04-03 25 views
0

Bir dl var ama çalıştırdığımda, dd ilk kez tıklandığında dd öğeleri düzgün çalışıyor, ancak dd stilinin görüntülenmesi değişiyor: yok ve neden emin değilim. Tarzın değişmesini nasıl engellerim? Ekranı eklemeye çalıştım: css ve dd etiketlerinin kendileri için önemli, ama işe yaramadı. İşte (JQuery $(document).ready(function(){} yılında embded edilir) benim JQuery, CSS ve HTML kodudd görüntü stili hiçbiri değişmiyor

setUpMenu(); 

function setUpMenu() { 
    $("dt").click(function(){ 
     $("dd").slideUp("fast"); 
     $(this).next().slideDown("fast"); 
    return false; 
    }); 
} 

<style> 
dt { 
    list-style: none; cursor: pointer; 
    background-color: #558C89; 
    width: 150px; height: 25px; 
    font-size: 1.1em; color: white; text-align: center; 
} 
dt:hover { 
     background-color: #D9853B; 
} 
dd { 
    text-decoration: none; 
} 
.otherMenu { 
    float: left; margin-left: 3%; 
} 
</style> 

<body> 
     <div class="otherMenu"> 
      <label>More items available:</label> 
      <dl> 
       <dt>Mounts</dt> 
       <dd>Picture</dd> 
       <dd>Photos</dd> 
       <dt>Shadow Boxes</dt> 
       <dt>Multi-frames +</dt> 
       <dd>2 picture</dd> 
       <dd>3 picture </dd> 
       <dd>4 picture</dd> 
       <dt>Posters frames</dt> 
       <dt>Artist frames</dt> 
       <dt>Classic posters</dt> 
       <dt>Accessories</dt> 
      </dl> 
     </div> 
    </body> 

cevap

1

Çünkü bu hattın var: O dd görünür olduğunda, bunlar nedeniyle gizlemek için döner demektir $("dd").slideUp("fast");

slideUp() işlevi. Aksine onları gösteren slideDown().

DÜZENLEME

Doğru, sizin öneri denedik

Like this

setUpMenu(); 

function setUpMenu() { 
    $("dt").click(function(){ 
     $("dd").slideUp("fast"); 
     $(this).nextUntil("dt", "dd").slideDown("fast"); 
    return false; 
    }); 
} 
+0

sonraki dt eleman kadar tüm dd unsurları açmak için nextUntil() işlevini kullanabilirsiniz rica ediyoruz anlıyorsa Ancak bu, tıklatıldığında dt öğelerinin kapanmamasına neden oldu; bu da bir akordeon menüsü gibi istediğim şey. –

+0

Pekala, cevabımı düzenledim –

+0

Bu hile yaptı! Teşekkür ederim! –