How do you hide the block when you press it outside?



  • How can you hide the block if you click outside it? I'll use that one. https://jsfiddle.net/Alarr/mp7gthqb/4/ ♪

    But that's the only way the block comes out and disappears when it hits the button, but it's got to be pressed on the button, and then it goes off the button button, and clicks outside the block. Well, it's understandable that the block shouldn't disappear when it's pressed, because it should be, for example, input to search. And a transparent backbone on the whole screen won't roll either.


  • QA Engineer

    One option is to add a click processor for the entire document and hide it. And so that it doesn't change when it's on the button and the block itself, add to their processors. https://api.jquery.com/event.stoppropagation/

    $(".button").click(function(e) {
      $('.toggled_block').toggle();
      e.stopPropagation();
    });
    $('.toggled_block').click(function(e) {
      e.stopPropagation();
    });
    $(document).click(function() {
      $('.toggled_block').hide();
    });
    .parent_block {
      width: 200px;
      height: 100px;
    }
    .button {
      width: 200px;
      height: 50px;
      background: #00BB65;
      border-radius: 5px;
      overflow: hidden;
    }
    .toggled_block {
      width: 200px;
      height: 50px;
      background: #fff;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      border: 1px solid #ccc;
      display: none;
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="parent_block">
      <div class="button"></div>
      <div class="toggled_block"></div>
    </div>




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2