我正在开发一个滑出式选项卡,当用户单击“反馈”按钮时,该选项卡将打开和关闭。当前逻辑默认隐藏tab然后勾选margin-right。一切都很好。我唯一担心的是,如果我在标签外部单击,如何关闭标签?
(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);
最佳答案
看这个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();
}
});
关于javascript - 在外部单击时关闭选项卡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35654539/