ドロップダウンが2番目の要素をクリックしたとき

Question

最初の要素をクリックするとドロップダウンが開き、スワップが行われますが、ドロップダウンを閉じない2番目の要素をクリックすると、 2番目の要素をクリックすると、要素を閉じてスワップする必要があります。モバイルでもメニューを閉じる。

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

body{margin: 0;color: #000;} 
 
\t /* CSS Document */ 
 
\t .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"} 
 
\t .menu .item{cursor: pointer;} 
 
\t .menu .item:nth-child(2){text-align: left;} 
 
\t .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

基本的には、問題があることである - なぜならdynamicallの変更/ DOMでの並べ替えのため、インデックスが更新されないので、実際のイベントターゲットを選びだしする必要があります（ - メニューので、イベントは静的な要素に委任されています） 。これは、修正することができます

$(document).ready(function(){ 
 

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

 

 

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

 
\t }); 
 
\t 
 
});

body{margin: 0;color: #000;} 
 
\t /* CSS Document */ 
 
\t .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"} 
 
\t .menu .item{cursor: pointer;} 
 
\t .menu .item:nth-child(2){text-align: left;} 
 
\t .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>

は交換し、表示/非表示が機能するようになりました。