gpt4 book ai didi

javascript - dd显示样式更改为无

转载 作者:太空宇宙 更新时间:2023-11-04 10:32:40 26 4
gpt4 key购买 nike

我有一个 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>

最佳答案

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

关于javascript - dd显示样式更改为无,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36391242/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com