第一个下拉菜单的问题

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

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

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

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

wss_BinAdam 2019-06-08

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

收起

2回答

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

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

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

与实现下拉菜单很相似

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

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>

(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'
})

先尝试着理解一下，编程最主要的是逻辑思考

祝学习愉快~

收起回答