Question

我有一个dl，但是当我运行它时，dd元素在首次点击dt时正常工作，但是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

1 个答案: