Question

我有一个日历在点击输入时打开，并且可以用十字架（<a href="javascript:closeCalendar('CalendarForm1');">X</a>关闭。我需要在点击页面上的任何其他位置时关闭日历。我尝试了各种方法在Stackoverflow上，但我认为与原始脚本存在冲突。我猜我有什么东西可以添加到closeClaendar函数，以便在div之外关闭？

      function closeCalendar(calendarId) {
        $("#" + calendarId).hide();
    }

    function CalendarMonthChanged(contract, product, dropdtls, form, ticketType, dateselectorid) {

        $calendar = $("#CalendarWrapper");

        var loader = '<%= Html.StaticImage(Url, "ajax-loader.gif") %>';
        $calendar.find(".table").html("<div class = 'calendar-loading' style='width:175px;'><img src = '" + loader + "' /></div>");

        var qty = 2;

        var dataArray = {
            contract: contract,
            productId: product,
            dropdtls: dropdtls,
            formNumber: form,
            ticketType: ticketType,
            numTickets: qty,
            dateSelectorId: dateselectorid
        };

        $.ajax({
            type: "POST",
            url: '<%= Url.Action("Calendar", "productapi", null) %>',
        data: dataArray,
        success: function (response) {
            $calendar.html(response);
            toggleLayer("CalendarForm1");
        }
    });
    }


<div id="CalendarWrapper">
<div id="Allocation">
    <div id="CalendarForm1" class = "CalendarForm" style="display:none;">
        <div class="allocation_form bg">
            <div class="calendar_header">
                <a href="javascript:closeCalendar('CalendarForm1');">
                    <span class="m-xs-10 halflings remove red"></span>
                    </a>


                        <select name="calendar_month" class="form-control" onchange="CalendarMonthChanged('<%= Model.ContractID %>','<%= Model.AWItemId %>',this.value,'<%= Model.FormNumber %>', '<%= Model.TicketType %>', <%= (int)Model.DateSelector %>); ">
                            <%= Model.Months %>
                        </select>


            </div>
            <div id="Loading" class="Loading" style="width:175px;height:172px;display:none;"></div>
            <%= Model.Days %>
        </div>
    </div>
</div>
</div>

Answer 1

向click添加document处理程序是一种简单的方法。

jsFiddle：http://jsfiddle.net/6pcq7pvo/3/

$(document).on("click", function (e) {
    if ($("#calendar").is(":visible") && !$(event.target).is('#calendar *, #calendar')) {
        // user clicked somewhere in the document but not inside the calendar
        $("#calendar").hide();
        $("#btnOpenCalendar").show();
    } else if (event.target.id === "btnOpenCalendar") {
        // user clicked the "Show calendar" button
        $("#btnOpenCalendar").hide();
        $("#calendar").show();
    }
    else if ($(event.target).is('#calendar span'))
    {
        // user clicked a date in the calendar
        // for demo purposes only; normally your calendar plugin handles this for you
        alert("Clicked date: " + $(event.target).text());
    }
});

#calendar {
    height: 100px;
    width: 100px;
    border: 1px solid black;
    background-color: #ccc;
    display: block;
    overflow: hidden;
}
#calendar span {
    display: inline-block;
    width: 17px;
    border:1px solid #ddd;
    cursor: pointer;
}
#btnOpenCalendar { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>click anywhere in this frame, but outside of the "calendar" (gray box) to close calendar</h3>
<div id='calendar'><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span>
</div>
<input id='btnOpenCalendar' type='button' value='Show calendar' />

Answer 2

试试这个：

$(document).click(function(){
  if($("#" + calendarId).is(':visible')){
   $("#" + calendarId).hide().css("visibility", "hidden");;
  }
});

也在您的锚点上单击“执行”，以避免再次隐藏日历：

$(document).on('click', 'a', function (e) {
  //show calendar
  $("#" + calendarId).show()
  e.stopPropagation();
});

or instead of  e.stopPropagation(); you can also use e.preventDefault();

点击远离div时关闭切换

2 个答案: