jquery - 显示/隐藏切换器无法正常工作
问题描述
我已经阅读了论坛和教程，但我是 jQuery 和 JS 的初学者。我想在我的页面上有多个切换器，在我的 div 之外显示/隐藏内容，但我无法实现它。我得到的最接近的是拥有它们，但它们都同时打开和关闭。
我正在尝试实现这样的效果，即如果您单击“更多内容指示器”，它就会消失并显示隐藏的内容，并且在隐藏并且现在可见的内容的末尾将是另一个隐藏按钮。
请看代码：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<style>
.wrapper {max-width: 1080px; margin: auto;}
.hidden0 {display: none;}
.showed0 {display: block;}
#switcher0 {background: #fff; font-size: 50px; border-style: none; margin: auto; cursor: pointer;}
.hidden1 {display: none;}
.showed1 {display: block;}
#switcher1 {background: #fff; font-size: 50px; border-style: none; margin: auto; cursor: pointer;}
#hide0 {margin: 20px auto; display: block; cursor: pointer; background: #fff; font-size: 50px; border-style: none;}
#hide1 {margin: 20px auto; display: block; cursor: pointer; background: #fff; font-size: 50px; border-style: none;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#toggler0").toggle(800);
$('#switcher0').toggleClass('showed0 hidden0');
});
});
$("#hide0").click(function(){
$("#toggler0").hide(800);
});
$(document).ready(function(){
$("button").click(function(){
$("#toggler1").toggle(800);
$('#switcher1').toggleClass('showed1 hidden1');
});
});
$("#hide1").click(function(){
$("#toggler1").hide(800);
});
</script>
</head>
<body>
<div class="wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-md-8">
<img class="img-fluid" src="http://placehold.it/900x600" alt="Placeholder">
</div>
<div class="col-md-4 align-self-center">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultricies euismod erat ut lacinia. Phasellus ipsum orci, tristique eu bibendum et, sodales eu metus.</p>
<button id="switcher0" class="showed0">+<p style="font-size: 16px;">Číst více</p></button>
</div>
</div>
</div>
<div id="toggler0" style="display: none;">
<div class="container-fluid" style="margin-top: 20px;">
<div class="row" style="padding-left: 15px; padding-right: 15px;">
<div class="col-md-4">
<img style="margin-bottom: 30px;" class="img-fluid" src="http://placehold.it/600x600" alt="Placeholder">
</div>
<div class="col-md-4">
<img style="margin-bottom: 30px;" class="img-fluid" src="http://placehold.it/600x600" alt="Placeholder">
</div>
<div class="col-md-4">
<img style="margin-bottom: 30px;" class="img-fluid" src="http://placehold.it/600x600" alt="Placeholder">
</div>
<div class="col-md-4">
<img style="margin-bottom: 30px;" class="img-fluid" src="http://placehold.it/600x600" alt="Placeholder">
</div>
<div class="col-md-4">
<img style="margin-bottom: 30px;" class="img-fluid" src="http://placehold.it/600x600" alt="Placeholder">
</div>
<div class="col-md-4">
<img style="margin-bottom: 30px;" class="img-fluid" src="http://placehold.it/600x600" alt="Placeholder">
</div>
<div class="col-md-4">
<img style="margin-bottom: 30px;" class="img-fluid" src="http://placehold.it/600x600" alt="Placeholder">
</div>
<div class="col-md-4">
<img style="margin-bottom: 30px;" class="img-fluid" src="http://placehold.it/600x600" alt="Placeholder">
</div>
<div class="col-md-4">
<img style="margin-bottom: 30px;" class="img-fluid" src="http://placehold.it/600x600" alt="Placeholder">
</div>
<div class="col-md-4">
<img class="img-fluid" src="http://placehold.it/600x600" alt="Placeholder">
</div>
<div class="col-md-4">
<img class="img-fluid" src="http://placehold.it/600x600" alt="Placeholder">
</div>
<div class="col-md-4">
<img class="img-fluid" src="http://placehold.it/600x600" alt="Placeholder">
</div>
</div>
</div>
<button id="hide0">↑ <p style="font-size: 16px;">Skrýt</p></button>
</div>
<div class="container-fluid" style="margin-top: 30px;">
<div class="row">
<div class="col-md-4 align-self-center">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultricies euismod erat ut lacinia. Phasellus ipsum orci, tristique eu bibendum et, sodales eu metus.</p>
<button id="switcher1" class="showed1">+<p style="font-size: 16px;">Číst více</p></button>
</div>
<div class="col-md-8">
<img class="img-fluid" src="http://placehold.it/900x600" alt="Placeholder">
</div>
</div>
</div>
<div id="toggler1" style="display: none;">
<div class="container-fluid" style="margin-top: 20px;">
<div class="row" style="padding-left: 15px; padding-right: 15px;">
<div class="col-md-4">
<img style="margin-bottom: 30px;" class="img-fluid" src="http://placehold.it/600x600" alt="Placeholder">
</div>
<div class="col-md-4">
<img style="margin-bottom: 30px;" class="img-fluid" src="http://placehold.it/600x600" alt="Placeholder">
</div>
<div class="col-md-4">
<img style="margin-bottom: 30px;" class="img-fluid" src="http://placehold.it/600x600" alt="Placeholder">
</div>
<div class="col-md-4">
<img style="margin-bottom: 30px;" class="img-fluid" src="http://placehold.it/600x600" alt="Placeholder">
</div>
<div class="col-md-4">
<img style="margin-bottom: 30px;" class="img-fluid" src="http://placehold.it/600x600" alt="Placeholder">
</div>
<div class="col-md-4">
<img style="margin-bottom: 30px;" class="img-fluid" src="http://placehold.it/600x600" alt="Placeholder">
</div>
<div class="col-md-4">
<img style="margin-bottom: 30px;" class="img-fluid" src="http://placehold.it/600x600" alt="Placeholder">
</div>
<div class="col-md-4">
<img style="margin-bottom: 30px;" class="img-fluid" src="http://placehold.it/600x600" alt="Placeholder">
</div>
<div class="col-md-4">
<img style="margin-bottom: 30px;" class="img-fluid" src="http://placehold.it/600x600" alt="Placeholder">
</div>
<div class="col-md-4">
<img class="img-fluid" src="http://placehold.it/600x600" alt="Placeholder">
</div>
<div class="col-md-4">
<img class="img-fluid" src="http://placehold.it/600x600" alt="Placeholder">
</div>
<div class="col-md-4">
<img class="img-fluid" src="http://placehold.it/600x600" alt="Placeholder">
</div>
</div>
</div>
<button id="hide1">↑ <p style="font-size: 16px;">Skrýt</p></button>
</div>
</div><!-- Wrapper -->
</body>
</html>提前感谢大家的帮助。
解决方案
你给每个按钮两个处理程序，通过两次调用$("button").click(...)，我修复了。
我做了一些进一步的清理以更好地了解发生了什么，我缩小了它以使其更适合 SO。
（此外，有很多 CSS 存在两次，我建议你只保留一半，除非你真的打算让它成为两种不同的样式。）
$(document).ready(function() {
// Use $("#id") instead of $("button")
$("#switcher0").click(function() {
$("#toggler0").toggle(800);
$('#switcher0').toggleClass('showed0 hidden0');
});
$("#hide0").click(function() {
$("#toggler0").hide(800);
$('#switcher0').toggleClass('showed0 hidden0');
});
// Use $("#id") instead of $("button")
$("#switcher1").click(function() {
$("#toggler1").toggle(800);
$('#switcher1').toggleClass('showed1 hidden1');
});
$("#hide1").click(function() {
$("#toggler1").hide(800);
$('#switcher1').toggleClass('showed1 hidden1');
});
});.wrapper {
max-width: 740px;
margin: auto;
}
.hidden0 {
display: none;
}
.showed0 {
display: block;
}
#switcher0 {
background: #fff;
font-size: 50px;
border-style: none;
margin: auto;
cursor: pointer;
}
.hidden1 {
display: none;
}
.showed1 {
display: block;
}
#switcher1 {
background: #fff;
font-size: 50px;
border-style: none;
margin: auto;
cursor: pointer;
}
#hide0 {
margin: 20px auto;
display: block;
cursor: pointer;
background: #fff;
font-size: 50px;
border-style: none;
}
#hide1 {
margin: 20px auto;
display: block;
cursor: pointer;
background: #fff;
font-size: 50px;
border-style: none;
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-md-8">
<img class="img-fluid" src="http://placehold.it/340x260" alt="Placeholder">
</div>
<div class="col-md-4 align-self-center">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultricies euismod erat ut lacinia. Phasellus ipsum orci, tristique eu bibendum et, sodales eu metus.</p>
<button id="switcher0" class="showed0">+<p style="font-size: 16px;">Číst více</p></button>
</div>
</div>
</div>
<div id="toggler0" style="display: none;">
<div class="container-fluid" style="margin-top: 20px;">
<div class="row" style="padding-left: 15px; padding-right: 15px;">
<div class="col-md-4">
<img style="margin-bottom: 30px;" class="img-fluid" src="http://placehold.it/60x60" alt="Placeholder">
</div>
<div class="col-md-4">
<img style="margin-bottom: 30px;" class="img-fluid" src="http://placehold.it/60x60" alt="Placeholder">
</div>
<div class="col-md-4">
<img style="margin-bottom: 30px;" class="img-fluid" src="http://placehold.it/60x60" alt="Placeholder">
</div>
<div class="col-md-4">
<img style="margin-bottom: 30px;" class="img-fluid" src="http://placehold.it/60x60" alt="Placeholder">
</div>
<div class="col-md-4">
<img style="margin-bottom: 30px;" class="img-fluid" src="http://placehold.it/60x60" alt="Placeholder">
</div>
<div class="col-md-4">
<img style="margin-bottom: 30px;" class="img-fluid" src="http://placehold.it/60x60" alt="Placeholder">
</div>
<div class="col-md-4">
<img style="margin-bottom: 30px;" class="img-fluid" src="http://placehold.it/60x60" alt="Placeholder">
</div>
<div class="col-md-4">
<img style="margin-bottom: 30px;" class="img-fluid" src="http://placehold.it/60x60" alt="Placeholder">
</div>
<div class="col-md-4">
<img style="margin-bottom: 30px;" class="img-fluid" src="http://placehold.it/60x60" alt="Placeholder">
</div>
<div class="col-md-4">
<img class="img-fluid" src="http://placehold.it/60x60" alt="Placeholder">
</div>
<div class="col-md-4">
<img class="img-fluid" src="http://placehold.it/60x60" alt="Placeholder">
</div>
<div class="col-md-4">
<img class="img-fluid" src="http://placehold.it/60x60" alt="Placeholder">
</div>
</div>
</div>
<button id="hide0">↑ <p style="font-size: 16px;">Skrýt</p></button>
</div>
<div class="container-fluid" style="margin-top: 30px;">
<div class="row">
<div class="col-md-4 align-self-center">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultricies euismod erat ut lacinia. Phasellus ipsum orci, tristique eu bibendum et, sodales eu metus.</p>
<button id="switcher1" class="showed1">+<p style="font-size: 16px;">Číst více</p></button>
</div>
<div class="col-md-8">
<img class="img-fluid" src="http://placehold.it/340x260" alt="Placeholder">
</div>
</div>
</div>
<div id="toggler1" style="display: none;">
<div class="container-fluid" style="margin-top: 20px;">
<div class="row" style="padding-left: 15px; padding-right: 15px;">
<div class="col-md-4">
<img style="margin-bottom: 30px;" class="img-fluid" src="http://placehold.it/60x60" alt="Placeholder">
</div>
<div class="col-md-4">
<img style="margin-bottom: 30px;" class="img-fluid" src="http://placehold.it/60x60" alt="Placeholder">
</div>
<div class="col-md-4">
<img style="margin-bottom: 30px;" class="img-fluid" src="http://placehold.it/60x60" alt="Placeholder">
</div>
<div class="col-md-4">
<img style="margin-bottom: 30px;" class="img-fluid" src="http://placehold.it/60x60" alt="Placeholder">
</div>
<div class="col-md-4">
<img style="margin-bottom: 30px;" class="img-fluid" src="http://placehold.it/60x60" alt="Placeholder">
</div>
<div class="col-md-4">
<img style="margin-bottom: 30px;" class="img-fluid" src="http://placehold.it/60x60" alt="Placeholder">
</div>
<div class="col-md-4">
<img style="margin-bottom: 30px;" class="img-fluid" src="http://placehold.it/60x60" alt="Placeholder">
</div>
<div class="col-md-4">
<img style="margin-bottom: 30px;" class="img-fluid" src="http://placehold.it/60x60" alt="Placeholder">
</div>
<div class="col-md-4">
<img style="margin-bottom: 30px;" class="img-fluid" src="http://placehold.it/60x60" alt="Placeholder">
</div>
<div class="col-md-4">
<img class="img-fluid" src="http://placehold.it/60x60" alt="Placeholder">
</div>
<div class="col-md-4">
<img class="img-fluid" src="http://placehold.it/60x60" alt="Placeholder">
</div>
<div class="col-md-4">
<img class="img-fluid" src="http://placehold.it/60x60" alt="Placeholder">
</div>
</div>
</div>
<button id="hide1">↑ <p style="font-size: 16px;">Skrýt</p></button>
</div>
</div>推荐阅读
- azure-devops - 在 Azure Devops 中将数据播种到 Cosmos DB
- python - 安装 causalml 包 python 的问题
- angular - Angular 单页应用程序通过 Azure Active Directory 访问多个受保护的 Web API
- visual-studio - 删除安装程序后 Visual Studio 2017 停止正常工作
- jquery - jquery ajax 调用返回 Html 页面而不是 json
- python - 我正在尝试构建一个数独求解器，但我收到一个错误，提示混合迭代和读取方法会混合数据
- json-deserialization - AttributeError: 'list' 对象没有属性 'tolist'
- r - 从同一个文件中绘制多个散点图
- python - Python：给定一个二维数组，返回 True 是数组中的每个数字都是 2、0 和大于 2000 的幂。没有导入的库
- mysql - 使用 MySQL 生成时间表，卡在向表中插入记录