64 lines
1.2 KiB
Markdown
64 lines
1.2 KiB
Markdown
## 显示与隐藏
|
|
|
|
|
|
### 主动打开/关闭下拉框
|
|
|
|
:::demo
|
|
```html
|
|
<div id="demo1" class="xm-select-demo"></div>
|
|
<button class="btn" id="demo1-open">打开下拉框</button>
|
|
<button class="btn" id="demo1-close">关闭下拉框</button>
|
|
|
|
<script>
|
|
var demo1 = xmSelect.render({
|
|
el: '#demo1',
|
|
data: [
|
|
{name: '张三', value: 1},
|
|
{name: '李四', value: 2},
|
|
{name: '王五', value: 3},
|
|
]
|
|
})
|
|
|
|
|
|
document.getElementById('demo1-open').onclick = function(){
|
|
//这里延迟1S, 是因为, 点击下拉框外边的位置 会出发关闭事件, 所以延迟演示效果
|
|
setTimeout(function(){
|
|
demo1.opened();
|
|
}, 1000);
|
|
}
|
|
|
|
document.getElementById('demo1-close').onclick = function(){
|
|
//先点一下关闭, 然后把下拉框点开, 3S后会自动关闭
|
|
setTimeout(function(){
|
|
demo1.closed();
|
|
}, 3000);
|
|
}
|
|
</script>
|
|
```
|
|
:::
|
|
|
|
### 监听打开/关闭下拉框
|
|
|
|
:::demo
|
|
```html
|
|
<div id="demo2" class="xm-select-demo"></div>
|
|
|
|
<script>
|
|
var demo2 = xmSelect.render({
|
|
el: '#demo2',
|
|
data: [
|
|
{name: '张三', value: 1},
|
|
{name: '李四', value: 2},
|
|
{name: '王五', value: 3},
|
|
],
|
|
show(){
|
|
alert('打开了')
|
|
},
|
|
hide(){
|
|
alert('关闭了')
|
|
}
|
|
})
|
|
</script>
|
|
```
|
|
:::
|