单击外部时关闭选项卡

Question

我正在制作一个幻灯片标签，当用户点击“反馈”按钮时，该标签会打开和关闭。当前逻辑默认隐藏选项卡，然后检查右边距。这一切都很棒。我唯一关心的是如果我在外面点击它如何关闭标签？

Link to the working JSFiddle

(function($) {
  //<![CDATA[
  $(document).ready(function() {

    $(function() {
      $('#nav').stop().animate({
        'margin-right': '-230px'
      }, 1);

      function toggleDivs() {
        var $inner = $("#nav");
        if ($inner.css("margin-right") == "-230px") {
          $inner.animate({
            'margin-right': '0'
          });
          $(".nav-btn").html('<img src="http://bookbecho.com/img/feedback.png" alt="open" />')
        } else {
          $inner.animate({
            'margin-right': "-230px"
          });
          $(".nav-btn").html('<img src="http://bookbecho.com/img/feedback.png" alt="close" />')
        }
      }
      $(".nav-btn").bind("click", function() {
        toggleDivs();
      });

    });


  }); //]]> 


})(jQuery);

Answer 1

请参阅此fiddle

在JS中创建一个新函数，如下所示

function closediv() {
  var $inner = $("#nav");
  $inner.animate({
    'margin-right': "-230px"
  });
  $(".nav-btn").html('<img src="http://bookbecho.com/img/feedback.png" alt="close" />')
}

并将其命名为

$('html').click(function() {
  //Hide the menus if visible
  var $inner = $("#nav");
  if ($inner.css("margin-right") != "-230px") {
    closediv();
  }
});

Answer 2

＆＃13;

＆＃13;

$(document).ready(function() {



  function toggleDivs() {
    var $inner = $("#nav");
    if ($inner.css("margin-right") == "-230px") {
      $inner.animate({
        'margin-right': '0'
      });
      $inner.addClass("active");
      $(".nav-btn").html('<img src="http://bookbecho.com/img/feedback.png" alt="open" />')
    } else {
      $inner.removeClass("active");
      $inner.animate({
        'margin-right': "-230px"
      });
      $(".nav-btn").html('<img src="http://bookbecho.com/img/feedback.png" alt="close" />')
    }
  }

  $(".nav-btn").bind("click", function(e) {

    e.stopPropagation();

    toggleDivs();


  });

  $(document).on("click", function(e) {
    e.preventDefault();
    $("#nav").animate({
      'margin-right': "-230px"
    });
    $(".nav-btn").html('<img src="http://bookbecho.com/img/feedback.png" alt="open" />')


  });


});

＆＃13;

div#nav {
  position: fixed;
  top: 37.5%;
  right: 0;
  margin: 0;
  padding: 0px 0 0;
  background-color: #c1c1c1;
  list-style: none;
  z-index: 9999;
  width: 230px;
  border-radius: 0px 0 0 0px;
  height: 202px;
  border: 2px solid #000;
}

div#nav .nav-btn {
  position: absolute;
  top: 0px;
  left: -33px;
  width: 31px;
  height: 217px;
  display: block;
  cursor: pointer;
  margin-top: -2px;
}

div#nav .nav-btn img {
  margin: 0px 0 0 0px;
}

div#nav li {
  width: 100px;
  margin-bottom: 20px;
  text-align: center;
  text-decoration: none;
  color: #FFF;
}

div#nav li a {
  color: #FFF;
  text-decoration: none;
}

p.helpParagraph {
  color: #ff6699;
  text-align: center;
  margin-top: 9%;
  font: 26px/1.2 'FuturaBT-Book', Arial, Helvetica, sans-serif;
}

p.csText {
  padding-left: 6%;
  font: 14px/1.2 'FuturaBT-Book', Arial, Helvetica, sans-serif;
  color: #323470;
}

button.cs-button {
  background: #323470;
  color: #fff;
  margin-left: 5%;
  padding-bottom: 2%;
  padding-top: 2%;
  border: none;
  width: 90%;
  margin-bottom: 4%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="nav">
  <div class="nav-btn"><img alt="open" src="http://bookbecho.com/img/feedback.png" /></div>

  aaaaaaaaaaaaaaaaaaaaaa
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

我希望这个帮助

https://jsfiddle.net/NourSammour/hz4v2ka4/6/

$("html").bind("click", function(e) {

    var container = $("#nav");

    if (e.target.tagName === 'HTML' && container.css('margin-right') === '0px') {
        toggleDivs()
    }
});