更改样式列表图像onclick + to -

Question

各位大家好，我希望你们一切都好  请帮我解决这个问题，我对此感到困惑， 当“onclick”我希望+成为 - 就像这个附加的图像。 记住那个+和 - 是名为image'puceplus.png'和'pucemoins.png'的图像

#ulist li:before {
    content: url('puceplus.png');
    margin-right: 4px;
}

 

<ul id="ulist">
            <li  onclick="hideshow('usublist1')">
                Gestion des données clients
                <ul id="usublist1" style="display:none;" class="sublist">
                    <li >
                       Centraliser vos données clients et éviter les redondances
                      </li>

                </ul>
            </li>
</ul>

Answer 1

我会使用两个不同的类来打开和关闭状态。 然后使用javascript，您在点击时更改了该内容。

有一个没有jQuery的工作示例。您只需将图像包含在正确的位置（内容：url（...））。

jsfiddle: change style list image without jQuery

#ulist > li {
  list-style: none;
}
#ulist > li:hover {
 cursor: pointer;
} 
#ulist > li:before {
  margin-right: 4px;
}
#ulist > li.closed:before {
  content: "+";
}
#ulist > li.opened:before {
  content: "-";
}