**已关闭。**此问题需要debugging details。当前不接受答案。
编辑问题以包括desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem。这将有助于其他人回答问题。
2天前关闭。
Improve this question
我想创建一个类似于苹果Mac迷你部分(下图)基本上4个按钮,隐藏/显示下面的文本。
https://www.apple.com/mac-mini/
(https://i.stack.imgur.com/OomgP.png)
目前使用下面的代码,当你再次点击同一个按钮时,它会消失,我不希望发生这种情况。我是javascript的新手,所以不知道如何消除这种情况/如果可能的话。
谢谢
<button class="icon1">Button 1</button>
<button class="icon2">Button 2</button>
<button class="icon3">Button 3</button>
<button class="icon4">Button 4</button>
<p class="info info1">Toggle 1</p>
<p class="info info2">Toggle 2</p>
<p class="info info3">Toggle 3</p>
<p class="info info4">Toggle 4</p>
</div>
.info2, .info3, .info4 {
grid-area: scrn;
display: none;
}
/* decorative only */
body {
font-size: 4vmin;
text-align: center;
}
button {
font-size: 2.5vmin;
}
$(function() {
// select the button to click, this can be any element not just a button
$('.icon1').click(function() {
// select which info panel to show/hide.
$('.info1').toggle();
// hide any info panels that are not info1.
$('.info').not('.info1').hide();
});
});
$(function() {
$('.icon2').click(function() {
$('.info2').toggle();
$('.info').not('.info2').hide();
});
});
$(function() {
$('.icon3').click(function() {
$('.info3').toggle();
$('.info').not('.info3').hide();
});
});
$(function() {
$('.icon4').click(function() {
$('.info4').toggle();
$('.info').not('.info4').hide();
});
});
4条答案
按热度按时间vom3gejh1#
您可能希望每个按钮都有这样的内容:
3bygqnnd2#
使用
show()
代替toggle()
,toggle表示显示或隐藏元素,如果当前显示元素,并且调用toggle()
,则隐藏元素,反之,如果隐藏元素,则隐藏元素。y53ybaqx3#
有了一个条件,它就可以按照我理解的你需要的方式工作,但是你可以用jquery找到其他的方式来动画,或者你可以使用像mo.js或gsap这样的库... https://api.jquery.com/toggle/(
该方法的第二个版本接受一个布尔参数。如果该参数为真,则显示匹配的元素;如果为false,则隐藏元素。本质上,语句:
相当于:
})这就是toggle的用法
x7yiwoj44#
根据你的描述,你似乎是在试图创建一个 accordion ...这基本上是一些标题显示和内容隐藏。
这里有一个很明显的例子,就是w3schools website。
如果您只使用支持HTML5的浏览器而不使用JavaScript,则还有一个选项,如图所示
希望这对你有帮助...最好的问候!