javascript - Javascript/Jquery滑动标签界面：在标签外点击时最小化标签

Question

我正在构建一个用户界面。当用户单击选项卡时，会触发一个函数，该函数检查其他打开的选项卡（通过搜索类“max”），最小化该选项卡，然后最大化单击的选项卡并应用类“max”。我想让它以这样一种方式工作，即如果我单击文档上的其他位置，它将最小化选项卡。有任何想法吗？

    function resize_tab(t) {
        tab = $(t).parent()
        console.log(tab);
        var size = 0 - parseFloat($(".max").css("height")) + 30;
        function resize(what,size){
            $(what).animate({"marginTop" : size},500,function(){}).toggleClass("max")
            }
        if ($(tab).hasClass("max")){    //if what you clicked is maxed...
            resize(tab,size);           //minimize it
            }else{                      //Or else, minimize whatever is maxed...
                resize($(".max"),size); //minimize whatever is maxed
                resize(tab,-1);     //and maximize what you clicked.
        }
    }           

    $(".tab").click(function(){resize_tab(this)})

Answer 1

您可以在 BODY 标签上放置一个点击事件，当有人点击正文时，它将执行代码：

$("body").click(function(){
  $(".tab").removeClass("max");
  //other resizing code as needed
})