我想点击一下div的图片
我实现了一个jQuery功能，可以在点击时打开一个关闭div。我在div中设置了一个加号而没有点击;单击div时，我希望将加号更改为减号。但是，我在这方面遇到了麻烦。这是我到目前为止编码的内容：
HTML：
<body>
<div id="wrapper">
<div id="content">
<div class="demo">
<h2 align="center">DASHBOARD</h2>
<h3 class="expand collapse-close" ">STPCODE NOT REGISTERED 10 <span></span> </h3>
<div class="collapse">
<p>List of unregistered user are here</p>
</div>
<h3 class="expand collapse-close">REGISTERED USERS IN DRAFT MODE 10 <span></span> </h3>
<div class="collapse">
<p>List of user in draft mode are here</p>
</div>
<h3 class="expand collapse-close">PAYMENT INITIATED FOR USERS 10<span></span> </h3>
<div class="collapse">
<p>Total number of users who have their payment initiated</p>
</div>
<h3 class="expand collapse-close"> PAYMENT RECIEVED FOR USERS 10 <span></span> </h3>
<div class="collapse">
<p>Total number of users who have their payment received</p>
</div>
<h3 class="expand collapse-close">PAYMENT DISAPPROVED FOR USERS 10<span></span> </h3>
<div class="collapse">
<p>Total number of users who have their payment disapproved</p>
</div>
</div>
</div>
</div>
</body>
</html>
CSS：
/* --------
The CSS rules offered here are just an example, you may use them as a base.
--------- */
* {
margin:0;
padding:0
}
/* --- Page Structure --- */
#wrapper {
margin:0 auto;
padding:15px 15% 8em;
text-align:left
}
#content {
max-width:70em;
width:70%;
margin:0 auto;
padding-bottom:20px;
overflow:hidden
}
.demo {
margin:1.5em 0;
padding:1.5em 1.5em 0.75em;
/* border:1px solid #ccc; */
position:relative;
overflow:hidden
}
.collapse p {
padding:0 10px 1em
}
.switch {
position:absolute;
top:1.5em;
right: 1.5em;
padding:3px
}
.post .switch {
position:static;
text-align:right
}
.post .main {
margin-bottom:.3em;
padding-bottom:0
}
.other li, .summary {
margin-bottom:.3em;
padding:1em;
border:1px solid #e8e7e8;
background-color:#f8f7f8
}
.other ul {
list-style-type:none;
text-align:center
}
/* --- Headings --- */
.expand {
padding-bottom:.75em;
background-color: #CFDEFF;
border:1px solid #FFFFFF;
}
.expand a {
color:#2A51A0;
}
.expand a span {
padding-left:100px;
}
.collapse-close span {
display:block;
float:right;
background:url(images/plus.png) center center no-repeat;
padding:10px;
}
#collapse-close {
display:block;
float:right;
background:url(images/minus.png) center center no-repeat;
padding:10px;
}
jQuery的：
<!--//--><![CDATA[//><!--
$(function() {
$("#content h3.expand").toggler();
$("#content div.demo").expandAll({trigger: "h3.expand", ref: "h3.expand"});
$("#content div.other").expandAll({
expTxt : "[Show]",
cllpsTxt : "[Hide]",
ref : "ul.collapse",
showMethod : "show",
hideMethod : "hide"
});
$("#content div.post").expandAll({
expTxt : "[Read this entry]",
cllpsTxt : "[Hide this entry]",
ref : "div.collapse",
localLinks: "p.top a"
});
});
//--><!]]>
当我点击该面板时，有人可以帮助我将加号更改为减号吗？相反，面板折叠后应出现加号。
图书馆/剧本：
- jQuery 1.4.2
- 的javascript / expand.js
我在我的代码中执行此操作
function aMethod（）{
$(function() {
$( "#expand" ).click(function() {
$( "#collapse" ).toggleClass( "collapse-close collapse-open");
});
});
}
</script>
</head>
<body>
<div id="wrapper">
<div id="content">
<div class="demo">
<h2 align="center">DASHBOARD</h2>
<h3 class="expand collapse-close" onclick="aMethod();">STPCODE NOT REGISTERED 10 <span></span> </h3>
<div class="collapse">
<p>List of unregistered user are here</p>
</div>
4 个答案:
答案 0 :(得分：2)
使用.toggleClass( className )
答案 1 :(得分：2)
就像@Rajesh Kumar已经说过的那样，你可以使用jQuery .toggleClass()。
<div class="first"></div>
$("div").click(function(){
$(this).toggleClass('second');
});
查看 fiddle
另一种方法是使用.addClass()和.removeClass()。它相当于.toggleClass()。
对于使用.addClass()和.removeClass()的演示，您可以观看 fiddle 。
<div class="first"></div>
$("div").click(function(){
if($("div").hasClass("first")){
$(this).removeClass("first");
$(this).addClass("second");
}
else{
$(this).removeClass("second");
$(this).addClass("first");
}
});
但我建议您使用.toggleClass()。它的代码更少，也可以更简单，更清晰。
答案 2 :(得分：0)
更改
#collapse-close {
display:block;
float:right;
background:url(images/minus.png) center center no-repeat;
padding:10px;
}
到
.collapse-open span{
background:url(images/minus.png) center center no-repeat;
}
并在函数/ jquery代码中使用jquery toggleClass方法，如：
.toggleClass('collapse-close collapse-open')
答案 3 :(得分：0)
在没有expand.js的情况下实现了您的需求 看看，它可能会有所帮助：
<head>
<style type="text/css">
/* --------
The CSS rules offered here are just an example, you may use them as a base.
--------- */
* {margin:0; padding:0}
/* --- Page Structure --- */
#wrapper{
margin:0 auto;
padding:15px 15% 8em;
text-align:left
}
#content {
max-width:70em;
width:70%;
margin:0 auto;
padding-bottom:20px;
overflow:hidden
}
.demo {
margin:1.5em 0;
padding:1.5em 1.5em 0.75em;
/* border:1px solid #ccc; */
position:relative;
overflow:hidden
}
.collapse p {padding:0 10px 1em}
.switch {position:absolute; top:1.5em; right: 1.5em; padding:3px}
.post .switch {position:static; text-align:right}
.post .main{margin-bottom:.3em; padding-bottom:0}
.other li, .summary {margin-bottom:.3em; padding:1em; border:1px solid #e8e7e8; background-color:#f8f7f8}
.other ul {list-style-type:none; text-align:center}
/* --- Headings --- */
.expand{padding-bottom:.75em;background-color: #CFDEFF; border:1px solid #FFFFFF; }
.expand a{color:#2A51A0;}
.expand a span {padding-left:100px;}
.collapse-close span {
display:block;
float:right;
background-size: 20px;
padding:10px;
}
.collapse {
transition: 1s;
}
.plus {
background:url(http://png-2.findicons.com/files/icons/1007/crystal_like/256/plus.png) center center no-repeat;
}
.minus {
background:url(http://i492.photobucket.com/albums/rr281/neversinned/design/icons/256x256/panel/minus.png) center center no-repeat;
}
.display-none {
display: none;
}
.trigger{
cursor: pointer;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.collapse-close span').click(function(){
debugger;
if(this.classList.contains('plus')){
this.classList.remove("plus");
this.classList.add("minus");
$(this.parentElement.parentElement).children(".collapse").removeClass('display-none');
}
else{
this.classList.remove("minus");
this.classList.add("plus");
$(this.parentElement.parentElement).children(".collapse").addClass('display-none');
}
})
$('.trigger').click(function(){
if(this.classList.contains('expand-all')){
$('.collapse-close span').each(function(){
this.classList.remove("plus");
this.classList.add("minus");
$(this.parentElement.parentElement).children(".collapse").removeClass('display-none');
});
this.classList.remove('expand-all');
this.classList.add('collapse-all');
$(this).html('[Collapse All]');
}
else {
$('.collapse-close span').each(function(){
this.classList.remove("minus");
this.classList.add("plus");
$(this.parentElement.parentElement).children(".collapse").addClass('display-none');
});
this.classList.remove('collapse-all');
this.classList.add('expand-all');
$(this).html('[Expand All]');
}
});
});
</script>
</head>
<body>
<div id="wrapper">
<div id="content">
<div class="demo">
<h2 align="center">DASHBOARD</h2>
<div class='trigger expand-all'>[Expand All]</div>
<div class="ques-ans">
<h3 class="expand collapse-close">STPCODE NOT REGISTERED 10 <span class="plus"></span></h3>
<div class="collapse display-none">
<p>List of unregistered user are here</p>
</div>
</div>
<div class="ques-ans">
<h3 class="expand collapse-close">REGISTERED USERS IN DRAFT MODE 10 <span class="plus"></span></h3>
<div class="collapse display-none">
<p>List of user in draft mode are here</p>
</div>
</div>
<div class="ques-ans">
<h3 class="expand collapse-close">PAYMENT INITIATED FOR USERS 10<span class="plus"></span></h3>
<div class="collapse display-none">
<p>Total number of users who have their payment initiated</p>
</div>
</div>
<div class="ques-ans">
<h3 class="expand collapse-close"> PAYMENT RECIEVED FOR USERS 10 <span class="plus"></span></h3>
<div class="collapse display-none">
<p>Total number of users who have their payment received</p>
</div>
</div>
<div class="ques-ans">
<h3 class="expand collapse-close">PAYMENT DISAPPROVED FOR USERS 10<span class="plus"></span></h3>
<div class="collapse display-none">
<p>Total number of users who have their payment disapproved</p>
</div>
</div>
</div>
</div>
</div>
</body>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？