如何用HTML, CSS和Javascript隐藏/显示多个元素

Question

我想创建一个类似苹果mac mini的区域(下图)基本上是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();
});                        
});

Answer 1

您可能希望为每个按钮设置如下内容:

$(function() {
// select the button to click, this can be any element not just a button
$('.icon1').click(function() {
// hide all info panels.
$('.info').hide();
// show info panel which belongs to the button.
$('.info1').show();
});                        
});

Answer 2

用show()代替toggle()。切换意味着它将显示或隐藏元素。如果它目前正在显示，你调用toggle()，它将被隐藏，反之亦然，如果它是隐藏的。

$('.icon1').click(function() {
// always show
$('.info1').show();
// hide any info panels that are not info1.
$('.info').not('.info1').hide();
}); 

Answer 3

$(function () {
// select the button to click, this can be any element 
not just a button
$(".icon1").click(function () {
$(".info1").css("display", "none")
? // select which info panel to show/hide.
$(".info1").toggle()
: null;
// hide any info panels that are not info1.
$(".info").not(".info1").hide();
});
});
$(function () {
$(".icon2").click(function () {
$(".info2").css("display", "none")
? // select which info panel to show/hide.
$(".info2").toggle()
: null;
$(".info").not(".info2").hide();
});
});
$(function () {
$(".icon3").click(function () {
$(".info3").css("display", "none")
? // select which info panel to show/hide.
$(".info3").toggle()
: null;
$(".info").not(".info3").hide();
});
});
$(function () {
$(".icon4").click(function () {
$(".info4").css("display", "none")
? // select which info panel to show/hide.
$(".info4").toggle()
: null;
$(".info").not(".info4").hide();
});
});

在一个条件下，它以我理解你需要的方式工作，但你可以用jquery找到其他方式来动画，或者你可以使用像mo.js或gsap这样的库…https://api.jquery.com/toggle/(

方法的第二个版本接受一个布尔形参。如果此参数为true，则显示匹配的元素;如果为false，则隐藏元素。实质上，语句:

$( "#foo" ).toggle( display );

等价于:

if ( display === true ) {
$( "#foo" ).show();
} else if ( display === false ) {
$( "#foo" ).hide();

}(这就是使用toggle的方式

Answer 4

根据您的描述，您似乎正在尝试创建一个手风琴…也就是一些显示出来的标题而内容是隐藏的

有一个非常清楚的例子列出w3schools网站

还有一个选项，如果你的目标是支持HTML 5但不需要javascript的浏览器，如图所示

希望这对你有帮助…最好的问候!