单击第二个元素时下拉不关闭答案

【问题标题】：drop down not closing when click second element单击第二个元素时下拉不关闭
【发布时间】：2016-12-30 20:06:00
【问题描述】：

当我单击第一个元素时，它会打开下拉菜单并进行交换，但是当我单击第二个元素时，它不会关闭下拉菜单。当我单击第二个元素时，它应该关闭并交换元素。在移动也关闭菜单。

$(document).ready(function(){
	/*$(".item:nth-child(2)").css("dispaly", "none");
        $(".item:nth-child(2)").css("height", window.innerHeight);
		*/$(".item:nth-child(1)").click(function(){
			 $(".item:nth-child(2)").show();
		});/*
		$(".item:nth-child(2)").click(function(){
			 $(".item:nth-child(2)").hide();
		});
	*/
	
	
	  $(".menu").find('.item').click(function(){
		var index = $(this).index();
		$('select[name=size]')
		.find('option:eq(' + index + ')')
		.attr('selected',true);
		$(this).prependTo('.menu');
	});
	
});

body{margin: 0;color: #000;}
	/* CSS Document */
	.menu{width: 500px; background: #000;  margin: 0 auto;text-align: center;color: #fff;font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif"}
	.menu .item{cursor: pointer;}
	.menu .item:nth-child(2){text-align: left;}
	.menu .item:nth-child(2) span{border-bottom: 1px solid #fff;display: block;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
<div class="ind item">IND</div>
<div class="int item" style="display: none;"><span>INT</span></div>
</div>

【问题讨论】：

标签： jquery

【解决方案1】：

基本上，问题在于 - 由于 DOM 中的所有动态更改/重新排序，索引不会更新，因此必须选择真正的事件目标（因此，事件被委托给静态元素 - 菜单）。这可能是解决办法：

$(document).ready(function(){

		$(".menu").on('click', '.item:first-child', function(){
  
  
			 $(".item").eq(1).show();
       
		});
	
	
	   $(".menu").on('click','.item:nth-child(2)', function(){
$(this).prependTo('.menu');



        $(this).next().hide();

	});
	
});

body{margin: 0;color: #000;}
	/* CSS Document */
	.menu{width: 500px; background: #000;  margin: 0 auto;text-align: center;color: #fff;font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif"}
	.menu .item{cursor: pointer;}
	.menu .item:nth-child(2){text-align: left;}
	.menu .item:nth-child(2) span{border-bottom: 1px solid #fff;display: block;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
<div class="ind item">IND</div>
<div class="int item" style="display: none;"><span>INT</span></div>
</div>

现在可以进行交换和隐藏/显示。

【讨论】：