javascript - 在外部单击时关闭选项卡

Question

我正在开发一个滑出式选项卡，当用户单击“反馈”按钮时，该选项卡将打开和关闭。当前逻辑默认隐藏tab然后勾选margin-right。一切都很好。我唯一担心的是，如果我在标签外部单击，如何关闭标签？

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();
  }
});