单击远离div时关闭切换

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

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

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