Изменить фоновое изображение скрытия / показа ссылки и переключения ul - PullRequest
Новая
       26

Изменить фоновое изображение скрытия / показа ссылки и переключения ul

0 голосов
/ 23 июня 2018

Я пытаюсь раскрыть '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>

1 Ответ

0 голосов
/ 23 июня 2018

Я думаю, что вы должны использовать переключатель, пожалуйста, проверьте этот пример 

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