dd顯示樣式更改爲無

我有一個dl，但是當我運行它時，dd元素在第一次點擊dt時正常工作，但隨後dd樣式的更改顯示爲：無，並且我不知道爲什麼。我如何保持風格不變？我嘗試添加display：block！對我的css和dd標籤本身很重要，但是這不起作用。這裏是我的JQuery，CSS和HTML代碼（jQuery是在$(document).ready(function(){} embded）dd顯示樣式更改爲無

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>

來源

2016-04-03 truly-daunting

這是因爲該行的：$("dd").slideUp("fast");

這意味着，當dd是可見的，他們原來隱藏因爲slideUp()功能。相反的是slideDown()顯示它們。

編輯

如果我理解正確的話你問你可以使用nextUntil()功能打開所有dd元素，直到下一個dt元素

Like this

setUpMenu(); 

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

來源

2016-04-03 21:19:16

我想你的建議是什麼，但是這導致dt元素在點擊時沒有關閉，這也是我想要的，就像手風琴菜單一樣。 –

好的，我已經編輯了我的答案 –

那就是訣竅！謝謝！ –

dd顯示樣式更改爲無

回答

相關問題