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

Question

这是我的html和jquery。 我想在单击帮助按钮时显示帮助图标div。 那么我只想在关闭按钮和我网站上除帮助按钮和帮助图标div之外的所有其他区域上隐藏帮助图标div。

 /* 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(); } }); 

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

请帮我解决这个问题。

谢谢。

Answer 1

 $(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(); } }); }); 

 .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">close</i> </a> </li> </ul> </div> 

Answer 2

编辑了代码。 试试吧：

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

Answer 3

一个简单的解决方案是在显示div时，在HTML上添加附加另一个div示例（）并将其放置在打开的div后面（位置：使用z-index固定）。 然后，单击添加的DIV以隐藏div，同时删除ID淡入的添加的div。 希望这可以帮助。