Question

我只想关闭与此reference的一条消息对话。我如何用toggle类定义tow函数，如下所示：

<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>

第二个函数在permentally中隐藏了这个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或closed类。我认为比在许多不同元素上上课更容易。

Answer 2

您可以手动切换课程。

$(document).ready(function () {
        $(".notificationicon").click(function () {
            var class = $("#notificationMenu").attr('class');
            if(class == 'open')
            {
              $(this).attr('class','close');
              $("#notificationMenu").attr('class','close');
            }else{
              $(this).attr('class','open');
              $("#notificationMenu").attr('class','open');
            }
        });
  });

如何使用jquery关闭消息框

2 个答案: