更改隐藏/显示链接的背景图像并切换ul

当我单击背景图像"+"符号时，我正在尝试扩展"ul"。同时，我希望该"+"号的背景图像更改为 https://image.ibb.co/d7gQUo/genmoo_Hide.jpg。

我希望你们能帮帮我。我是 Jquery 的新手，解决这个问题会教会我很多东西。我从未尝试在单击时发出 2 个命令，即切换单击链接的背景图像并隐藏/显示其下的列表。

@charset "utf-8";
* {
	padding:0;
	margin:0;
	}
body {
	font-family:Arial, Helvetica, sans-serif;
	}
.panel {
	width:200px;
	padding:20px;
	border:1px solid #ccc;
	position:relative;
	}
h3 {
	font-size:1em;
	line-height:20px;
	}
span.hideshow {
	position:absolute;
	top:20px;
	right:20px;
	}
	span.hideshow a {
		display:block;
		height:20px;
		width:20px;
		text-indent:-9999px;
		background-image:url("https://image.ibb.co/bvkkUo/genmoo_Show.jpg");
/* URL for show image = https://image.ibb.co/bvkkUo/genmoo_Hide.jpg */
		}
ul {
display:none;
	margin-top:15px;
	list-style-type:none;
	}
li {
	line-height:24px;
	border-bottom:1px solid #eee;
	}
	li:last-child {
		border-bottom:none;
		}

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Hide Show Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="panel">
	<h3>Teams</h3>
<span class="hideshow"><a href="#">.</a></span>
<ul>
	<li>Arsenal</li>
<li>Chelsea</li>
<li>Liverpool</li>
<li>Man United</li>
</ul>
</div>
</body>
</html>

我认为你应该使用切换按钮，请检查此示例

input[type="checkbox"] {
display:none;
}
input[type="checkbox"] + span {
display:inline-block;
width:19px;
height:19px;
padding-top: 5px; /* align the label with the image*/
vertical-align:middle;
background:url(http://icons.iconseeker.com/png/fullsize/mazes-mini/02-laugh.png) left top no-repeat;
cursor:pointer;
}
input[type="checkbox"]:checked +  span {
background:url(http://icons.iconseeker.com/png/fullsize/mazes-mini/01-smile.png) left top no-repeat;
}

<label>Expand 
<input type="checkbox" id="c1" name="cc" class="mycheckbox" />
<span></span>
</label>

相关内容

最新更新

热门标签：