gpt4 book ai didi

javascript - 隐藏/显示分区

转载 作者:行者123 更新时间:2023-11-28 05:18:44 24 4
gpt4 key购买 nike

我希望 (".aboutPage") 在单击 (".about") 时显示和隐藏。在开始时显示 div。我如何将 hide() 与此合并,因为它在页面加载后不会隐藏。请帮忙。我知道 div 尚未调整大小或其他任何内容,我会在所有三个都正常工作后执行此操作。

.aboutPage {
height: 50px;
width: 50px;
background-color: red;
}
<div class="container">
<h1 class="title">Name Goes Here</h1>
<br>
<div class="menu">
<h1 class="about">About Me</h1>
<h1 class="projects">Projects</h1>
<h1>Contact Me</h1>
</div>
<div class="aboutPage"> Here it Is</div>
</div>

最佳答案

您必须使用toggle 方法来显示或隐藏匹配的元素。

另外,您需要绑定(bind)一个click事件处理程序到.about元素。

在页面加载时隐藏 div:$('.aboutPage').hide();

或使用css:

.aboutPage{
display:none;
}

$('.aboutPage').hide();
$('.about').click(function(){
$('.aboutPage').toggle();
});
.aboutPage{
height: 50px;
width: 50px;
background-color: red;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="container">
<h1 class="title">Name Goes Here</h1>
<br>
<div class="menu">
<h1 class="about">About Me</h1>
<h1 class="projects">Projects</h1>
<h1>Contact Me</h1>
</div>
<div class="aboutPage"> Here it Is</div>
</div>
</body>

关于javascript - 隐藏/显示分区,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41925849/

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