0

我有这样的标记。它适用于有人会点击的按钮。

<div class="logout-wrap">
  <div class="account-info"> <a href="../profile.php">admin ADMIN</a>
</div><!--.account-info-->
<div class="account-info-icon">
  <ul>
    <li><a href="" class="account-sprited notice"><span>5</span></a></li>
    <li><a href="" class="account-sprited profile profiletest"></a></li>
  </ul>
</div>
</div>

它适用于默认隐藏的区域，当有人单击按钮时，它将显示 div 及其内容。

<div class="account-info-box" style="display: block;">
  <div class="top-info">
    <div class="profile-img">
      <img alt="" src="../images/profile.png">
    </div><!--.profile-img-->
    <div class="profile-text">
      <span class="username">sgsh dshjds</span>
      <span class="acctype">Account Type- Agent</span>
      <span class="view-profile"><a href="" class="profile">View Profile</a></span>
    </div><!--.profile-text-->
  </div><!--.top-info-->
  <div class="bottom-info">
    <ul>
      <li><a href="" class="profile">Create An Account</a></li>
      <li><a href="" class="profile">Signout</a></li>
    </ul>
  </div><!--.bottom-info-->
</div>

当页面加载时，帐户信息框的 div 将被隐藏。当我单击配置文件时，它将显示 div 帐户信息框。为此，我有这样的 jquery

<script type="text/javascript">
  jQuery(document).ready(function() {
    jQuery('div.account-info-box').hide();
      jQuery('a.profile').click(function(event){
        event.preventDefault();
        jQuery('div.account-info-box').show();
    });
  });
</script>

但是在这里我希望当我再次单击页面的任何其他区域时，它将再次隐藏。所以有人可以告诉我如何做到这一点。任何帮助和建议都将是非常可观的。谢谢

编辑 我已经像这样更改了我的 jQuery 代码

jQuery(document).ready(function() {
    jQuery('div.account-info-box').hide();
    jQuery('.profiletest').click(function(event){
      event.preventDefault();
      jQuery('div.account-info-box').show();
   });
 });

 jQuery(document).ready(function(event) {
  if(event.target.ClassName !== 'profiletest') {
    jQuery('div.account-info-box').hide();
  }
 });

现在它显示错误TypeError: event.target is undefined

4

2 回答 2

0

将此添加到 document.ready 函数内的脚本中。

jQuery("body").click(function(e){ //or jQuery(document)
  if(e.target.className !== "profile")
  {
    jQuery('div.account-info-box').hide();
   }
});

最终代码。（更新）

<script type="text/javascript">
 jQuery(document).ready(function() {
    jQuery('div.account-info-box').hide();
    jQuery('a.profile').click(function(event){
      event.preventDefault();
      jQuery('div.account-info-box').show();
   });

   jQuery("body").click(function(e){ //or jQuery(document)
    if(e.target.className !== "profile")
    {
      jQuery('div.account-info-box').hide();
     }
    });
 });
</script>
于 2013-07-31T11:58:24.867 回答
0 
<script type="text/jscript">
document.Click = Hide();

//to show on button click
$(".bottom-info").Click(function(){
$(".account-info-box").attr("display","block");
});

//to hide it
Hide(function(){
$(".account-info-box").attr("display","none");
});

<script>
于 2013-07-31T12:02:04.660 回答