javascript - 如何在 javascript 中使用相同的函数,在 html 中的相同类中
问题描述
除了我是 JavaScript 新手外,我有几天没有找到答案的问题。
$(document).on('click', '.content-click', function(){
$(".content-click span").toggleClass("clicked"),
$(".content-view").toggleClass("viewed");
$(this).show();
});
.content-click {
display: block;
width: 100%;
height: 2rem;
padding: 0.375rem 0.75rem;
font-size: .75rem;
font-weight: 500;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: 0.25rem;
cursor: pointer;
}
.content-click p {
display: inline;
margin: 0;
}
.content-click span {
width: 10px;
height: 10px;
position: relative;
top: 5px;
float: right;
vertical-align: middle;
background: url(../img/arrow.png) no-repeat;
transition: all 0.3s ease;
transform: rotate(0deg);
}
.content-click span.clicked {
transform: rotate(90deg);
} /*button click styling */
.content-view {
display: block;
width: 100%;
height: 0;
border: 0px solid #ebebeb;
box-sizing: border-box;
margin-top: 0rem;
margin-bottom: 0rem;
position: relative;
border-radius: .25rem;
padding: 0;
font-size: 0;
font-weight: 500;
opacity: 0;
transition: all 0.2s ease;
}
.content-view::after {
content: '';
width: 10px;
height: 10px;
border-top: 1px solid #ebebeb;
border-right: 0px solid #ebebeb;
border-bottom: 0px solid #ebebeb;
border-left: 1px solid #ebebeb;
position: absolute;
left: 95%;
top: 0%;
margin-top: -6px;
margin-left: -6px;
transform: rotate(45deg);
background-color: #fff;
}
.content-view.viewed {
height: auto;
border: 1px solid #ebebeb;
margin-top: .25rem;
margin-bottom: 1rem;
font-size: .75rem;
padding: 1rem;
opacity: 1;
} /*description area-text styling*/
<div class="container">
<div class="content-click" style="margin:.25rem;">
<div id="content-1">
<p>First Item list...</p>
<span></span>
</div>
</div>
<div class="content-view">
<div id="view-1">
<p>Description...</p>
</div>
</div>
<div class="content-click" style="margin:.25rem;">
<div id="content-2">
<p>First Item list...</p>
<span></span>
</div>
</div>
<div class="content-view">
<div id="view-2">
<p>Description...</p>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
一旦我将类名添加为 .toggleClass 目标,具有完全相同类的相同项目将弹出描述,即使我只单击第一个按钮。抱歉问愚蠢的问题。
解决方案
您需要维护单击事件的范围,以便每当您单击一个项目时,只有下一个描述会展开,而不是全部展开。
这是代码:
$(document).on('click', '.content-click', function(){
$(this).find("span").toggleClass("clicked"); // this finds the child element 'span'
$(this).next().toggleClass("viewed"); // .next() is the selector for the next sibling element;
$(this).show();
});
.content-click {
display: block;
width: 100%;
height: 2rem;
padding: 0.375rem 0.75rem;
font-size: .75rem;
font-weight: 500;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: 0.25rem;
cursor: pointer;
}
.content-click p {
display: inline;
margin: 0;
}
.content-click span {
width: 10px;
height: 10px;
position: relative;
top: 5px;
float: right;
vertical-align: middle;
background: url(../img/arrow.png) no-repeat;
transition: all 0.3s ease;
transform: rotate(0deg);
}
.content-click span.clicked {
transform: rotate(90deg);
} /*button click styling */
.content-view {
display: block;
width: 100%;
height: 0;
border: 0px solid #ebebeb;
box-sizing: border-box;
margin-top: 0rem;
margin-bottom: 0rem;
position: relative;
border-radius: .25rem;
padding: 0;
font-size: 0;
font-weight: 500;
opacity: 0;
transition: all 0.2s ease;
}
.content-view::after {
content: '';
width: 10px;
height: 10px;
border-top: 1px solid #ebebeb;
border-right: 0px solid #ebebeb;
border-bottom: 0px solid #ebebeb;
border-left: 1px solid #ebebeb;
position: absolute;
left: 95%;
top: 0%;
margin-top: -6px;
margin-left: -6px;
transform: rotate(45deg);
background-color: #fff;
}
.content-view.viewed {
height: auto;
border: 1px solid #ebebeb;
margin-top: .25rem;
margin-bottom: 1rem;
font-size: .75rem;
padding: 1rem;
opacity: 1;
} /*description area-text styling*/
<div class="container">
<div class="content-click" style="margin:.25rem;">
<div id="content-1">
<p>First Item list...</p>
<span></span>
</div>
</div>
<div class="content-view">
<div id="view-1">
<p>Description...</p>
</div>
</div>
<div class="content-click" style="margin:.25rem;">
<div id="content-2">
<p>First Item list...</p>
<span></span>
</div>
</div>
<div class="content-view">
<div id="view-2">
<p>Description...</p>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
推荐阅读
- sql-server - 将 sql server AlphaToDate4 转换为具有 5 个数字的 oracle 日期
- python - 在熊猫数据框中使用多列作为索引
- vba - 如何使用资本和利率计算贷款成本?Vba
- android - 将动态标头添加到带有正文的 POST 请求(Retrofit v2.4.0)
- elixir - 埃克托 | 如何获取应用程序中的所有模式模块
- android - 适用于某些智能手机的 Google Play 隐形应用
- android - 如何修复getResourceID在android中找不到问题?
- laravel - Laravel nova 在动作展示页面上从用户的各个领域获取数据
- apache-spark - Spark Scala 中是否有 ARIMA 模型?
- flash - 为什么反编译 swf 文件时 jpexs 工具不起作用?