时间戳

首页 > 解决方案 > 更改隐藏/显示链接的背景图像并切换 ul

jquery - 更改隐藏/显示链接的背景图像并切换 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>

标签： jqueryimagebackgroundtoggle

解决方案

我认为你应该使用切换按钮，请检查这个例子

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>

推荐阅读