javascript - 如何使用jquery关闭消息框

Question

我只想用此 reference 关闭一个消息对话。我如何使用切换类定义两个函数，如下所示:

<script language="javascript" type="text/javascript">
    $(document).ready(function () {
        $(".notificationicon").click(function () {
            $(this).toggleClass('open');
            $("#notificationMenu").toggleClass('open');
        });
    });
</script>
<script language="javascript" type="text/javascript">
    $(document).ready(function () {
        $("#hpl_close").click(function () {
            $(this).closest("#notificationMenu").toggle();
        });
    });
</script>

第二个函数永久隐藏此 div，当用户再次单击通知图标区域时，我的第一个脚本不起作用。

------------------------已更新-------------------- ------

这是我的 html :

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="notification.ascx.cs" Inherits="Staff_notification" %>
<link id="Link1" href="../css/notification.css" rel="stylesheet" type="text/css"/>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<div id="thisBox" class="notifbox">
<div class="contain"><a href="#" class="notificationicon on" style="position:relative;text-decoration:none;">Messages&nbsp;<span class="noti_bubble1" runat="server" id="message_alert"><asp:Label ID="lbl_count_messages" runat="server"></asp:Label></span></a>
    <ul id="notificationMenu" class="notifications">
      <li class="titlebar">
        <span class="title">Messages</span>
        <span class="settings"><i class="icon-cog"></i>
        </span>
      </li>
      <div class="notifbox">
      <ul>
       <asp:Repeater ID="Repeater_Messages" runat="server">
       <ItemTemplate>
        <li class=" notif">
         <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl='<%# this.ResolveUrl(string.Format("Ticket.aspx?ticketid={0}&flag=0",Eval("Ref_no").ToString())) %>'>
            <div class="imageblock">
             <asp:Image ID="userphoto" runat="server" CssClass="notifimage" ImageUrl = "../DisplayImage.ashx?userId='<%#Eval('UserId')%>"/>
            </div> 
            <div class="messageblock">
              <div class="message"><strong><%#Eval("Name")%></strong>:<br/><%#Eval("Message")%></div>
              <div class="messageinfo">
                <i class="icon-comment"></i><%# DataBinder.Eval(Container.DataItem,"CreatedDate","{0:ddd, dd MMMM yyyy}")%>&nbsp;at&nbsp;<%# DataBinder.Eval(Container.DataItem,"CreatedDate","{0:hh:mm tt}")%></div>
            </div>
          </asp:HyperLink>
        </li>
       </ItemTemplate>
        </asp:Repeater>
        </ul>
      </div>
      <li class="seeall">
        <a href="javascript:void(0);" id="hpl_close">Close</a>
      </li>
    </ul>
  </div>
</div>

请帮助我...

Answer 1

我认为你根本不需要两个函数。

在第一个中，您切换类'open'，这显然会打开/显示该框。因此，如果您使用相同的逻辑再次切换它，则可以将其关闭。像这样的东西应该有效:

$(document).ready(function () {
    $(".notificationicon, #notificationMenu, #hpl_close").click(function () {
        $(".notificationicon, #notificationMenu, #hpl_close").toggleClass('open');
    });
});

我使用了您切换类的所有元素，因为我没有您的 HTML。但是，如果所有内容都在单个容器类中，您可能需要向其中添加一个 open 或 close 类。我认为这比在许多不同的元素上创建类更容易。