モバイルタッチの表示と非表示div

Question

私は画像をタッチしてdivを表示し、タッチが見えるときに触れるスクリプトを作ろうとしています。タッチすると、同時に表示され、非表示になります。私は理由を知っていますが、一度触れてからもう一度触れると隠れて見えるようにするにはどうすればいいのか分かりません。私が持っている問題は、それが明らかにそれはそれが2つの機能を連続して表示して隠すように働くことです。これは私が試したものです：

HTML

<div id="box1"> 
<div class="boxesBubble bubble1"> 
<a href="http://iarabrows.pt/novo2/threading">Threading &#8690;</a><br> 
<a href="http://iarabrows.pt/novo2/threading">Sobrancelhas &#8690;</a><br> 
<a href="http://iarabrows.pt/novo2/threading">Pestanas &#8690;</a><br> 
<a href="http://iarabrows.pt/novo2/threading">Limpeza de pele &#8690;</a><br> 
<a href="http://iarabrows.pt/novo2/threading">Peeling &#8690;</a><br> 
</div> 
<div id="boxes" class="img1"> 
<img class="imageBoxes" src="images/face.jpg"/> 
<div class="arrow_box"> 
<div id="boxTitle"> 
Face 
</div> 
</div> 
</div> 
</div> 

スクリプト

$('.img1').on('mouseover touch', function() { 

    $('.bubble1').show(200); 

}); 
$('#box1').on('mouseleave click touch', function() { 

    if($('.bubble1').is(':visible')){ 
    $('.bubble1').hide(200); 
    } 

}); 

も、このアプローチが、ショーを試してみましたが、分割のために隠して第二

$('#box1').on('touch', function() { 
    if($('.bubble1').is(':visible') == true){ 

     $('.bubble1').hide(200); 

    } else { 

     $('.bubble1').show(200); 

    } 
}); 

Answer 1

あなたがtoggleを試してみましたか？

$('.bubble1').toggle(200);