如何通过单击齿轮图标和身体外部的任何位置隐藏此设置框？答案

【问题标题】：How can I hide this setting-box on a click on the gear icon and anywhere outside of the body?如何通过单击齿轮图标和身体外部的任何位置隐藏此设置框？
【发布时间】：2021-04-03 05:03:57
【问题描述】：

这是我使用的 CSS。

.setting-box 
{
position: fixed;
left:-200px;
top:0;
width: 200px;
z-index: 1000;
min-height: 100vh; 
}
.toggle-setting 
{
position: absolute;
right: -34px;
top: 6em;
background: #fff;
border-radius: 0px 5px 5px 0;
text-align: center;
cursor: pointer; 
}

我尝试了很多东西，但它不起作用！

该代码运行良好，但是。

除非我点击页面时设置框不会关闭

$('.setting-box .toggle-setting').on('click',function () {
$(this).parent('.setting-box').toggleClass('open');

if ($(this).parent('.setting-box').hasClass('open')) {
$(this).parent('.setting-box').animate({
        left:0,
        },1000);

     } else {
       $(this, 'body').parent('.setting-box').animate({
            left:'-200'
      },1000);
     }
});

【问题讨论】：

标签： javascript html css sass settings

【解决方案1】：

你可以试试这个。

编辑

var clicked = false;

$('.setting-box .toggle-setting').on('click',function () {

if (clicked == false) {
$(this).parent('.setting-box').animate({
        'left' : '0',
        },1000);
  clicked = true;
     } else {
$(this).parent('.setting-box').animate({
        'left' : '-200px',
        },1000);
  clicked = false;
 }
console.log(clicked);
});

$(document).click( function () {
 var target = $(event.target);
 if (!target.is(".toggle-setting") && !target.is('.setting-box') && clicked == true) {
  $('.setting-box').animate({
     'left' :'-200px',
  },1000);
   clicked = false;
   console.log(clicked);
 }
});

【讨论】：

【解决方案2】：

第一个功能做切换设置框；

$('#gear-button').click(function() {
  $(".setting-box").toggleClass("display-block");
});

第二个功能隐藏文档点击设置框（正文点击）

// hide setting box on body click
$(document).on('click', function() {
  $(".setting-box").removeClass("display-block");
});

第三个函数在用户点击按钮或设置框时停止点击事件，防止文档点击

$("#gear-button, .setting-box").click(function(e) {
  e.stopPropagation();
})

一般来说，您可以使用此模板添加自己的动画和类。

完整示例：

JSFiddle

【讨论】：

【解决方案3】：

您可以将设置块放在另一个块中，将设置放在align:center;中，从z-index:; 中添加并在您单击齿轮或任何位置时制作，以便此块采用display:none; 的样式。这可能会对您有所帮助。

【讨论】：