**已关闭。**此问题需要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，则还有一个选项，如图所示
希望这对你有帮助...最好的问候！