显示div onclick并在其外部单击隐藏div并关闭按钮

时间：2016-09-28 07:55:42

标签： javascript jquery

这是我的html和jquery。 我想在点击帮助按钮时显示帮助图标div。然后我想隐藏帮助图标div只在关闭按钮和我的网站的所有其他区域，除了帮助按钮和帮助图标div。

＆＃13;
＆＃13; 
/* Help Icon Togg  */
$(".help").click(function() {
  $(".help-icons").show();
});


$(document).click(function(e) {   
	    if(e.target.id != 'help' || e.target.id != 'help-icons' || e.target.id == 'close') {
	        $(".help-icons").hide();   
	    } 
	});
＆＃13; 
.help-main,
.help,
.help-detail {
  position: fixed;
  right: 50px;
  bottom: 50px;
  z-index: 9999;
}

.help {
  background: #81bc41;
  border-radius: 60px;
  color: #fff;
  border: 15px solid #81bc41;
  cursor: pointer;
  -webkit-box-shadow: 0px 0px 33px -8px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 0px 33px -8px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 0px 33px -8px rgba(0, 0, 0, 0.75);
}

ul.help-icons {
  width: 100%;
  margin-right: 74px;
  margin-bottom: 18px;
}

ul.help-icons li {
  display: inline;
  margin-right: 10px;
  background: #f44336;
  border-radius: 50%;
  padding: 12px 14px 12px 14px;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}

ul.help-icons a {
  color: #fff;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="help-main" class="help-main">
  <div id="help" class="help"><i class="fa fa-question-circle" aria-hidden="true"></i></div>
  <ul id="help-icons" class="help-icons" style="display:none;">
    <li><a href=""><i class="fa fa-book" aria-hidden="true"></i></a></li>
    <li><a href=""><i class="fa fa-question-circle" aria-hidden="true"></i></a></li>
    <li><a href=""><i class="fa fa-heartbeat" aria-hidden="true"></i></a></li>
    <li id="close" class="close-help"><a href="#"><i class="fa fa-times" aria-hidden="true"></i></a></li>
  </ul>
</div>
＆＃13;
＆＃13;
＆＃13;

请帮我解决这个问题。

感谢。

3 个答案:

答案 0 :(得分：1)

＆＃13;
＆＃13; 
$(document).ready(function() {
  /* Help Icon Togg  */
  // code with show / hide with green circle
  $(".help").on('click', function() {
    setTimeout(function() {
      if ($(".help-icons").hasClass('active')) {
         $(".help-icons").removeClass('active');
         $(".help-icons").hide();
      } else {
        $(".help-icons").addClass('active')
        $(".help-icons").show();
      }
    }, 200);
  });
  // code with close button
  $("#close").on('click', function() {
      $(".help-icons").removeClass('active');
      $(".help-icons").hide();
  });
  $(document).click(function(e) {
    if (e.target.id != 'help-icons' || e.target.id != 'help' || e.target.id == 'close') {
      $(".help-icons").hide();
    }
  });
});
＆＃13; 
.help-main,
.help,
.help-detail {
  position: fixed;
  right: 50px;
  bottom: 50px;
  z-index: 9999;
}
.help {
  background: #81bc41;
  border-radius: 60px;
  color: #fff;
  border: 15px solid #81bc41;
  cursor: pointer;
  -webkit-box-shadow: 0px 0px 33px -8px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 0px 33px -8px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 0px 33px -8px rgba(0, 0, 0, 0.75);
}
ul.help-icons {
  width: 100%;
  margin-right: 74px;
  margin-bottom: 18px;
}
ul.help-icons li {
  display: inline;
  margin-right: 10px;
  background: #f44336;
  border-radius: 50%;
  padding: 12px 14px 12px 14px;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
ul.help-icons a {
  color: #fff;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="help-main" class="help-main">
  <div id="help" class="help"><i class="fa fa-question-circle" aria-hidden="true"></i>
  </div>
  <ul id="help-icons" class="help-icons" style="display:none;">
    <li><a href=""><i class="fa fa-book" aria-hidden="true"></i></a>
    </li>
    <li><a href=""><i class="fa fa-question-circle" aria-hidden="true"></i></a>
    </li>
    <li><a href=""><i class="fa fa-heartbeat" aria-hidden="true"></i></a>
    </li>
    <li id="close" class="close-help">
      <a href="#">
        <i class="fa fa-times" aria-hidden="true">close</i>
      </a>
    </li>
  </ul>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

编辑了代码。试试吧：

/* Help Icon Togg  */
$(document).on('click','.help',function() {
  $(".help-icons").show();
});

 $(document).on('click',function(e) {
  if (e.target.id != 'help-icons' && e.target.id != 'help' && e.target.id == 'close') {
    $(".help-icons").hide();
  }
}); // ending bracket added


   
.help-main,
.help,
.help-detail {
  position: fixed;
  right: 50px;
  bottom: 50px;
  z-index: 9999;
}

.help {
  background: #81bc41;
  border-radius: 60px;
  color: #fff;
  border: 15px solid #81bc41;
  cursor: pointer;
  -webkit-box-shadow: 0px 0px 33px -8px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 0px 33px -8px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 0px 33px -8px rgba(0, 0, 0, 0.75);
}

ul.help-icons {
  width: 100%;
  margin-right: 74px;
  margin-bottom: 18px;
}

ul.help-icons li {
  display: inline;
  margin-right: 10px;
  background: #f44336;
  border-radius: 50%;
  padding: 12px 14px 12px 14px;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}

ul.help-icons a {
  color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="help-main" class="help-main">
  <div id="help" class="help"><i class="fa fa-question-circle" aria-hidden="true"></i></div>
  <ul id="help-icons" class="help-icons" style="display: none;">
    <li><a href=""><i class="fa fa-book" aria-hidden="true"></i></a></li>
    <li><a href=""><i class="fa fa-question-circle" aria-hidden="true"></i></a></li>
    <li><a href=""><i class="fa fa-heartbeat" aria-hidden="true"></i></a></li>
    <li id="close" class="close-help"><a href="#"><i class="fa fa-times" aria-hidden="true"></i></a></li>
  </ul>
</div>

答案 2 :(得分：-2)

一个简单的解决方案可能是当你展示你的div时，你添加了另外的div examples（）到你的HTML并将它放在你的open div后面（位置：用z-index修复）。然后在附加的DIV上添加一个单击以隐藏div，同时删除ID为fade的附加div。 希望这会有所帮助。

相关问题
最新问题