jQueryアニメが期待どおりに動作しない

Question

何らかの理由で、閉じるアイコンをクリックすると、期待どおりにポジションがアニメーション表示された後、自動的に復帰します。

FIDDLE：https://jsfiddle.net/fq7na1zr/あなたはフィドルに移動し、オレンジ色のボックスをクリックした場合

、それは最高の位置をアニメーション化しても、それを閉じるために、あなたにXが表示されます。

Xをクリックすると、divが再びアニメーション化されますが、それが再び撮影されます。

divを取得するにはどうすればよいですか？

HTML：

<div data-position="down" id="container"> 
     <div id="close" style="display: none;">X</div> 
    lorem ipsum dolor sit amet 
    </div> 

のjQuery：

$('#container').click(function() { 
      var currentState = $(this).data('position'); 

      if (currentState == "down") { 
       $('#container').animate({bottom: "20%"}); 
       $('#container').attr('data-position','up'); 
       $('#close').css('display','block'); 
      } 

     }); 

     $('#close').click(function() { 
      $('#container').animate({bottom: "-100%"}); 
      $('#container').attr('data-position','down'); 
      $('#close').css('display','none'); 
     }); 

Answer 1

これは、あなたがXをクリックしながら、あなたは何を得るのでクリックは、経由するため、コンテナのクリックイベントもトリガーされますので、何が起こっています最初に "X"クリックイベントが発生し、次に期待通りに戻るようになっている.container clickイベントで何が起きるかが決まります。関連する場合は "isDown"のようなフラグを作成し、trueまたはfalseに設定し、両方のアクションが発生しないように各イベントハンドラ内でif条件を作成する必要があります。

Answer 2

JavaScriptでこれ以上複雑にする必要はありません。ただ、CSSクラストグル：

HTML

<div id="container"> 
    <div id="close">X</div> 
    lorem ipsum dolor sit amet 
</div> 

CSS

#container { 
    position: fixed; 
    bottom: 0%; 
    background-color: #f0ad4e; 
    color: #000; 
    padding: 10px 0; 
    font-size: 20px; 
    width: 100%; 
    cursor: pointer; 
    transition: all 0.5s ease-out; 
} 

#container.up { 
    bottom: 20%; 
} 

#container.down { 
    bottom: -100%; 
} 

#container.up #close { 
    display: block; 
} 

#close { 
    display: none; 
} 

JS

var $container = $('#container') 
var $close = $('#close') 

$container.click(() => $container.addClass('up')) 
$close.click(() => $container.addClass('down')) 

JSFiddleデモ：https://jsfiddle.net/fq7na1zr/3/

Answer 3

event.stopPropagation(); 

は問題を解決します。 #close divと#container divもクリックしているためです。 event.stopPropagation（）を使用します。 #container divのイベントリスナーの呼び出しを禁止します。