dd 显示样式更改为 none

Question

我有一个 dl，但是当我运行它时，首次单击 dt 时 dd 元素工作正常，但随后 dd 样式变为 display:none，我不确定为什么.如何保持样式不变？我已经尝试添加 display: block!important 到我的 css 和 dd 标签本身，但这没有用。这是我的 JQuery、CSS 和 HTML 代码（JQuery 嵌入在 $(document).ready( function(){} 中）

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>

Answer 1

这是因为这一行：$("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;
   });
}

dd 显示样式更改为 none

dd display style changing to none

html

javascript

css

jquery

dd