javascript - 选择下拉菜单后如何更改img内容
问题描述
选择下拉列表后,我想更改图像的内容。但是在选择了活跃的伪类之后,它一直在闪烁。到目前为止,我已经尝试了许多伪类,但没有一个起作用。谁能告诉我我做错了什么?
var expanded = false;
function showCheckboxes() {
var checkboxes = document.getElementById("checkboxes");
if (!expanded) {
checkboxes.style.display = "block";
expanded = true;
} else {
checkboxes.style.display = "none";
expanded = false;
}
}
这里是直播
var expanded = false;
function showCheckboxes() {
var checkboxes = document.getElementById("checkboxes");
if (!expanded) {
checkboxes.style.display = "block";
expanded = true;
} else {
checkboxes.style.display = "none";
expanded = false;
}
}
.multiselect {
width: 100px;
}
.selectBox {
position: relative;
}
.selectBox select {
width: 100%;
font-weight: bold;
}
.overSelect {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
#checkboxes {
display: none;
border: 1px gray solid;
}
#checkboxes label {
display: block;
}
#checkboxes label:hover {
background-color: yellow;
}
select {
-webkit-appearance: none;
-moz-appearance: none;
text-indent: 1px;
text-overflow: '';
background-color: transparent;
width: 100px !important;
}
.select-container {
display: flex;
width: 100px;
background-color: gray;
}
.drop-arrow {
content: url("https://cdn3.iconfinder.com/data/icons/fatcow/32/cursor.png");
}
.selectBox:active .drop-arrow {
content: url("https://cdn0.iconfinder.com/data/icons/fatcow/32/change_password.png");
}
<div class="multiselect">
<div class="selectBox" onclick="showCheckboxes()">
<div class="select-container">
<select>
<option>Select an option</option>
</select>
<img class="drop-arrow" alt="">
</div>
<div class="overSelect"></div>
</div>
<div id="checkboxes">
<label for="one"><input type="checkbox" id="one">First checkbox</label>
<label for="two"><input type="checkbox" id="two">Second checkbox</label>
<label for="three"><input type="checkbox" id="three">Three checkbox</label>
</div>
</div>
解决方案
朋友,问题出在 selectBox:active .drop-arrow 它仅在按下 clic 时才有效,您可以像下面的代码一样进行操作;我看到的另一个问题是,在这种情况下,您必须将 flex-grow、flex-shrink、flex-basis 添加到 flex 容器的子项 .select-container,此代码可以使用 jquery toogleclass() 检查它
var expanded = false;
function showCheckboxes() {
var checkboxes = document.getElementById("checkboxes");
if (!expanded) {
checkboxes.style.display = "block";
$(".select-container div").removeClass("drop-arrow");
$(".select-container div").addClass("drop-arrow2");
expanded = true;
} else {
$(".select-container div").removeClass("drop-arrow2");
$(".select-container div").addClass("drop-arrow");
checkboxes.style.display = "none";
expanded = false;
}
}
.multiselect {
width: 140px;
}
.selectBox {
position: relative;
}
.selectBox select {
width: 100%;
font-weight: bold;
}
.overSelect {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
#checkboxes {
display: none;
border: 1px gray solid;
}
#checkboxes label {
display: block;
}
#checkboxes label:hover {
background-color: yellow;
}
select {
-webkit-appearance: none;
-moz-appearance: none;
text-indent: 1px;
text-overflow: '';
background-color: transparent;
flex:1 0 auto;
}
.select-container {
display: flex;
background-color: gray;
width:auto;
}
.drop-arrow {
flex:1 0 auto;
display:block;
width: 50px;
height: 35px;
background-image:url("https://cdn3.iconfinder.com/data/icons/fatcow/32/cursor.png");
background-repeat: no-repeat;
}
.drop-arrow2 {
content: url("https://cdn0.iconfinder.com/data/icons/fatcow/32/change_password.png");
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="multiselect">
<div class="selectBox" onclick="showCheckboxes()">
<div class="select-container">
<select>
<option>Select an option</option>
</select>
<div class="drop-arrow" alt=""></div>
</div>
<div class="overSelect"></div>
</div>
<div id="checkboxes">
<label for="one"><input type="checkbox" id="one">First checkbox</label>
<label for="two"><input type="checkbox" id="two">Second checkbox</label>
<label for="three"><input type="checkbox" id="three">Three checkbox</label>
</div>
</div>
推荐阅读
- c# - Blob 代码下载比 MS Azure 存储资源管理器慢得多
- sql-server - 使用 BCP 从 SQL Server 生成 XML 文件的问题
- r - 使用模式匹配将数据附加到具有相似名称的列
- javascript - javascript document.write 和 innerHTML 输出不同的值
- html - 如何在没有插件的情况下自动刷新页面?
- javascript - Javascript返回语句
- php - 替换字符串中的字符代码 8217 时 PHP 意外输出
- kotlin - 属性访问语法无法识别 Kotlin Safe Cast
- teradata - 是否有一种工具可以让用户查看他们的查询,但只能查看他们在 Teradata 上的查询?
- network-programming - NAT 中的 STUN 打孔不能随机工作