Закройте окно, щелкнув на стороне поля - PullRequest
Новая
       59

Закройте окно, щелкнув на стороне поля

0 голосов
/ 01 октября 2019

Мне нравится закрывать прямоугольник, кликая по его краям.

Первые 2 скрипта открываются / закрываются, а некоторые украшают кнопки. Они отлично работают.

Теперь на третьем скриптеЯ пытаюсь закрыть коробку, щелкая ее вне, пока коробка открывается.

Он продолжает открываться и закрываться, как разбитый веб-сайт, как только я нажимаю на него сейчас.

Было бы очень признательноуслышать любую помощь. Спасибо. 

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

Ответы [ 3 ]

0 голосов
/ 01 октября 2019

Вы можете попробовать этот код 


    
        $(function(){
          $(".ddd").css("display","none");
          $(".button-toggle").on("click", function() {
            event.stopPropagation();
            $(".ddd").slideToggle();
          });
          $(document).click( function(){
            $('.ddd').slideUp();
          });
       });
0 голосов
/ 03 октября 2019

Ваша проблема вызвана всплыванием , вот объяснение, взятое из ранее связанной статьи:

"Когда событие происходит с элементом, сначала запускаются обработчикина нем, потом на его родителе, а затем и на других предках. "

Так что при нажатии на элемент это событие сработает на всех родительских элементах, включая сам документ. Как только вы поймете это, проблема с вашим кодом должна стать очевидной. При добавлении документа вы добавляете событие, которое впоследствии создает щелчок по «кнопке», который всплывает в документе и запускает обратный вызов по щелчку, который снова вызывает щелчок по кнопке в бесконечном цикле. Это можно увидеть, добавив console.log('clicked'); return; перед вызовом .click()

$(function() {
  var flg = "on";      
    $(document).click(function() {
      console.log('I bubbled!');
      // Prevent the click running, stopping the infinite loop
      return;
      if(flg == "on"){            
        $(".button-toggle").click();
      }
      flg = "off";
  });
});

Чтобы обойти всплывающее окно, вы должны отделить функциональность щелчка от щелчка, например, написав closeфункция и вызов этого, вместо того, чтобы вызвать щелчок на самой кнопке закрытия.

0 голосов
/ 01 октября 2019

Проверьте это. 


    
        $(function() {
            var flg = "on";      
            $(document).on("click", function(e) {
                if(flg == "on"){            
                    $(".button-toggle").html("");
                    $(".ddd").slideUp();
                }
                flg = "off";
            });
       });
...