通过单击框的外侧来关闭框

Question

我喜欢通过滑出盒子的侧面来关闭盒子。

前两个脚本是打开/关闭和一些按钮装饰。它们正常工作。

现在，在第三个脚本上，我试图在盒子打开时通过滑出盒子的侧面来关闭盒子。

一旦我单击它，它就像崩溃的网站一样继续打开和关闭。

非常感谢听到任何帮助。谢谢。

//1st script to open and close
<script>
$(function(){
  $(".ddd").css("display","none");
  $(".button-toggle").on("click", function() {
    $(".ddd").slideToggle();
  });
});
</script>

//2nd script for decoration
<script>
$(function(){
  var flg = "off";
  $('.button-toggle').on('click', function(){
    if(flg == "off"){
      $(this).html("<div>close</div>");
      flg = "on";
    }else{
      $(this).html("");
      flg = "off";
    }
  });
});
</script>

//3rd script to close box by cliking out side of the box.
<script>
  $(function() {
  var flg = "on";      
    $(document).click(function() {
         if(flg == "on"){            
      $(".button-toggle").click();}
       flg = "off";
    });
  });
</script>

<div class="wrap">

    <div class="button-toggle">
        <div>buttons</div>
    </div>

    <div class="ddd">
        <ul>
            <li>
            BUTTON A
            </li>
            <li>
            BUTTON B
            </li>
        </ul>
    </div>

</div>

Answer 1

检查此。

$（function（）{var flg =“ on”;$（document）.on（“ click”，function（e）{if（flg ==“ on”）{$（ “按钮切换。 ”）HTML（“”）。$（ “DDD”）效果基本show（）;}flg =“关闭”;}）;}）;