dd显示样式更改为none

dd display style changing to none

本文关键字：none 显示 样式 dd      更新时间：2023-11-24

我有一个dl，但当我运行它时，当第一次单击dt时，dd元素可以正常工作，但后来dd样式变为显示：none，我不知道为什么。如何防止样式发生变化？我已经尝试添加显示：块！这对我的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>

这是因为这行：$("dd").slideUp("fast");

这意味着当dd可见时，由于slideUp()的功能，它们将变为隐藏。相反，slideDown()显示了它们。

编辑

如果我正确理解你的要求，你可以使用nextUntil()函数打开所有dd元素，直到下一个dt元素

像这个

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