Question

我的标记是这样的。这是有人点击的按钮。

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

这里当页面加载时，account-info-box的div将被隐藏。当我点击个人资料时，它会显示div account-info-box。为此，我有这样的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

Answer 1

将此内容添加到document.ready function。

中的脚本中

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>

Answer 2

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

jQuery单击按钮将显示div并再次单击页面的任何区域将隐藏div？

2 个答案: