Question

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

$(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>

Answer 1

基本上，问题在于 - 由于DOM中的动态变化/重新排序，索引没有被更新，因此必须选择真实事件目标（因此，事件被委托给静态元素 - 菜单）。这可能是修复：

＆＃13;

$(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();

	});
	
});

＆＃13;

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;}

＆＃13;

<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>

＆＃13;

交换和隐藏/显示现在有效。

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

1 个答案: