Question

我正在使用2个脚本，如下所示。

第一个脚本打开了一个div，当点击一个按钮时，该等级为＃34; bookaviewing＆＃34;。

我需要和班级一起使用＆＃34;预订表格＆＃34;当有人点击＆＃34;预订表格＆＃34;之后关闭div - 第二个脚本执行此操作。

我的问题是，当您多次点击该按钮时（因为它在＆＃34;预订表格＆＃34; div之外），它不会关闭＆＃34;预订-form＆＃34; ...它只是一直打开。

我需要结合下面的2个脚本＆amp;需要帮助。

脚本1

<script type="text/javascript">
// set click/toggle event on bookaviewing button to show form
$('.bookaviewing').click(function () {
    $('.booking-form').slideToggle(400).toggleClass('opened');
    return false;
});
</script>

脚本2

<script type="text/javascript">
// close booking-form when click outside of div
$(document).mouseup(function (e){
    var bookingform = $(".booking-form");
    if (!bookingform.is(e.target) && bookingform.has(e.target).length === 0){
        bookingform.hide();
    }
});
</script>

Answer 1

您需要排除预订表单和切换按钮，以避免同时打开/关闭切换：

http://jsfiddle.net/TrueBlueAussie/4vnvpcjb/3/

// set click/toggle event on bookaviewing button to show form
$('.bookaviewing').click(function () {
    $('.booking-form').slideToggle(400).toggleClass('opened');
    return false;
});
$(document).on('mouseup', function (e){
    var bookingform = $(".booking-form");
    if (!bookingform.is(e.target) 
         && bookingform.has(e.target).length === 0 
         && !$(e.target).is('.bookaviewing'))
    {
        bookingform.slideUp();
    }
});

注意：我改变了外部点击，从hide()改为slideUp，因为hide有点刺耳。

jquery toggle class＆amp;鼠标按钮问题

1 个答案: