<分区>
标签 javascript jquery html css
是否可以让选择的选项看起来像图标?
我的意思是,当您单击图标时,将出现选择菜单而不是框样式。这可能吗?
我的意思是这样的
最佳答案
function dropdowntoggle() {
document.getElementById("myDropdown").classList.toggle("show");
}
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdown = document.getElementsByClassName("dropdown-content")[0];
if (dropdown.classList.contains('show')) {
dropdown.classList.remove('show');
}
}
}
window.onload = function() {
var selections = document.getElementsByClassName('selection');
for(var i = 0; i < selections.length; i++) {
var selection = selections[i];
selection.onclick = function() {
console.log(this.innerText);
}
}
}
.dropbtn {
background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
border-radius: 5px;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #2980B9;
}
.without-button {
width: 15px;
background-color: transparent;
color: black;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #ddd;}
.show {display: block;}
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="dropdown">
<button onclick="dropdowntoggle()" class="dropbtn"><i class="fa fa-bars" aria-hidden="true"></i></button>
<div id="myDropdown" class="dropdown-content">
<a class="selection" href="#home">Home</a>
<a class="selection" href="#about">About</a>
<a class="selection" href="#contact">Contact</a>
</div>
</div>
<!-- uncomment this to see same behaviour without button -->
<!-- <div onclick="dropdowntoggle()" class="dropbtn without-button">
<i class="fa fa-bars" aria-hidden="true"></i>
</div> -->
关于javascript - 更改 HTML 选项选择作为图标样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51795698/
相关文章:
Javascript: replace() all 但仅在 html 标签之外
javascript - 如何告诉 ionic 幻灯片显示什么幻灯片 (slideTo)
javascript - 碰撞功能不起作用,但运动被抑制。没有其他运动抑制代码。
java - 通过 ajax 发送 Map<String,List<String>> 作为请求参数
javascript - AngularJS:如何将服务方法分配给 View 中的 Controller $scope 和 ng-repeat (it)?
javascript - 使用 jQuery 和 scrollTo 插件的 Scrollspy