第一个下拉菜单的问题

第一个下拉菜单的按钮是个背景图片吗？（因为素材里没有所以我认为是一个div假装的）

如果按钮用外面的div假装的话，点击这个按钮后怎么操控下拉菜单的显示呢?

这个问题的总结就是：外部生成的按钮怎么控制下拉菜单的内容显示隐藏呢？

另外我想问一下怎么生成一个自定义并触发呢事件呢？消息订阅用的是自定义事件来实现的吗？

wss_BinAdam 2019-06-08

源自：项目：ES6实现图片切换特效 3-2 项目作业

收起

2回答

樱桃小胖子回答被采纳获得+3积分 2019-06-10 10:08:06

首先，上面给你的代码并不是源码哦。而是帮你梳理的实现思路。如果同学仔细去看，你会发现里面有每一步骤的实现思路和事件的绑定与触发哈

2、外部按钮控制下拉菜单实现思路可以参考如下：

与实现下拉菜单很相似

3、自定义事件的绑定和触发可以使用addEventListener，比如：

1	`element.addEventListener("click",` `function() {……});`

4、消息订阅也是可以用自定义事件实现的

希望可以帮到你！

收起回答

樱桃小胖子 2019-06-09 10:29:29

从同学的描述上来看，同学是对本次作业没有实现思路么？这里帮你整理了一下大概的实现思路，可以参考：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="wrap">
    <div>
      <div class="title">自定义select</div>
      <!-- 下拉列表容器 -->
      <div class="selector clearfix">
        <!-- 下拉列表 -->
        <div class="selector-content" id="selector-content"></div>
        <div class="selector-arow">▼</div>
        <!-- 下拉列表内容 -->
        <div class="selector-items">
          <!-- 搜索框 -->
          <input type="text" class="selector-search" placeholder="搜索" id="search">
          <!-- 下拉列表项 -->
          <div class="result">
          </div>
        </div>
      </div>
    </div>
    <div>
      <p id="out"></p>
    </div>
   
    <div style="text-align: center;margin-top: 60px;">
      <div class="title">原生select</div>
      <select id="demo">
        <option value="1" type="构建工具">Babel</option>
        <option value="2" type="构建工具">Webpack</option>
        <option value="3" type="构建工具">Rollup</option>
        <option value="4" type="前端框架">Vue</option>
        <option value="5" type="前端框架">Angular</option>
        <option value="6" type="前端框架">React</option>
        <option value="7" type="前端框架">Nerv</option>
      </select>
    </div>
  </div>
  <script src="js/index.js"></script>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

(function(window,document){
//选择器方法
    const qs = {
        $(ele,parent = document){
            return parent.querySelector(ele);
        },
        $all(ele,parent = document){
            return parent.querySelectorAll(ele);
        },
        appendChild(parent,...child){
            child.forEach(element=>{
                parent.appendChild(element);
            })
        }
    }
//定义构造函数
    function Selector(option){
        this._init(option);
        this.getContent();
        this.list();
        this.bind();
    }
    //初始化
    Selector.prototype._init = function ({content,items,search,result,out}){
        this.content = qs.$(content);
        this.items = qs.$(items);
        this.searchBar = qs.$(search);
        this.out = qs.$(out);
        this.shown = false;
        this.demoOptions={};
        this.curliIndex = undefined;
        this.shownHeight = '';
        this.items.style.display = 'none';
        this.items.style.height = 0;
        this.content.innerHTML = '未选择';
    }
    //显示、隐藏功能
    Selector.prototype.showhide = function(ele){
        if(this.shown){
            this.shownHeight = ele.style.height;
            ele.style.height = 0;
            setTimeout(()=>{
                ele.style.display = 'none';
                 
            },500)  
            this.shown = false;
        }else{
            ele.style.display = 'block';
            setTimeout(()=>{
                ele.style.height = this.shownHeight || '200px';
                 
            })  
            this.shown = true;
        }
    }
    //搜索框搜索功能
    Selector.prototype.search = function(value){
        let reg = new RegExp(value,'ig')
        for (let i = 0;i<this.curLi.length;i++){
            if(!value){
                this.curLi[i].style.display = 'block';
            }
            else if(reg.test(this.curLi[i].innerText)){
                this.curLi[i].style.display = 'block';
            }else{
                this.curLi[i].style.display = 'none';
            }
        }
        if(this.ul.offsetHeight < 200){
            this.items.style.height = this.ul.offsetHeight + 40 + 'px';
        }else {
            this.items.style.height = '200px';
        }
         
    }
    //获取原生select内容
    Selector.prototype.getContent = function(){
        let options = qs.$all('option',qs.$('#demo'));
        for (let i=0;i<options.length;i++){
            if(!this.demoOptions.hasOwnProperty(options[i].getAttribute('type'))){
                this.demoOptions[options[i].getAttribute('type')]=[];
                this.demoOptions[options[i].getAttribute('type')].push(options[i].innerHTML);
            }else{
                this.demoOptions[options[i].getAttribute('type')].push(options[i].innerHTML);
            }
        }
    }
    //生成下拉列表选项
    Selector.prototype.list = function(){
        let ul = document.createElement('ul');
        let ulInner = '';
        for (i in this.demoOptions){
            let div = `<div>${i}</div>`;
            let li = '';
            for (let j=0;j<this.demoOptions[i].length;j++){
                li+=`
                <li>${this.demoOptions[i][j]}</li>
            `
            }
            ulInner += div + li;
             
        }
            ul.innerHTML = ulInner;
            qs.appendChild(qs.$('.result'),ul);
         
    }
    //绑定事件
    Selector.prototype.bind = function(){
        //点击选择框显示隐藏事件
        let sel = qs.$('.selector');
        sel.addEventListener('click',(e)=>{
                e.stopPropagation();
                if(e.target.id === 'search'){return}
                this.showhide(this.items);
                     
                     
        });
        //选择选项后显示文字事件
        this.ul = qs.$('ul',qs.$('.result'));
        this.curLi = qs.$all('li',this.ul);
        let self = this;
        this.curLi.forEach((curli,index)=>{
                curli.addEventListener('click',function(e){
                    e.stopPropagation();
                    self.showhide(self.items);
                    let beforeVal = self.content.innerText;
                    let beforeIndex = self.curliIndex;
                    self.content.innerText = this.innerText;
                    self.curliIndex = index + 1;
                    self.out.innerHTML = `之前的值是 ${beforeVal} - ${beforeIndex}<br>
                        改变后的值是 ${self.content.innerText} - ${self.curliIndex}
                    `
                    for(i=0;i<self.curLi.length;i++){
                        self.curLi[i].className = '';
                    }
                    this.className = 'mousedown';
            })
                 
        })
        //点击外侧隐藏下拉列表
        document.addEventListener('click',(e)=>{
            e.stopPropagation();
            if(this.shown){
                this.showhide(this.items);
            }
             
        })
        //搜索框输入监听事件
        this.searchBar.addEventListener('keyup',()=>{
            let value = this.searchBar.value;
            this.search(value);
        })
     
    }
    //全局变量
    window.selector = Selector;
})(window,document)
//实例化
new selector({
    items:'.selector-items',
    content:'#selector-content',
    search:'.selector-search',
    out:'#out'
})