Question

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

＆＃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;

请帮我解决这个问题。

感谢。

Answer 1

＆＃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;

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时，你添加了另外的div examples（）到你的HTML并将它放在你的open div后面（位置：用z-index修复）。然后在附加的DIV上添加一个单击以隐藏div，同时删除ID为fade的附加div。希望这会有所帮助。

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

3 个答案: