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显示样式更改为无

回答

相关问题