更改 hide/show link 的背景图片并切换 ul

Question

当我单击作为背景图像的“+”符号时，我正在尝试展开 'ul'。同时，我希望将那个“+”号的背景图像更改为 https://image.ibb.co/d7gQUo/genmoo_Hide.jpg。

我希望你们能帮助我。我是 Jquery 的新手，解决这个问题会让我学到很多东西。我从来没有尝试通过单击来创建 2 个命令，即切换 link 单击的背景图像以及 hide/show 它下面的列表。

@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>

Answer 1

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

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>

更改 hide/show link 的背景图片并切换 ul

Change background image of hide/show link and toggle ul

jquery

background

image

toggle