我怎样才能通过点击齿轮图标和 body 以外的任何地方来隐藏这个 setting-box？

Question

this the CSS I use.

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

I tried a lot of things but it doesn't work!

that code works very well but.

except when I click on the page the setting box doesn't close

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

Answer 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);
 }
});

Answer 2

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

Answer 3

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

$('#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

我怎样才能通过点击齿轮图标和 body 以外的任何地方来隐藏这个 setting-box？

How can I hide this setting-box on a click on the gear icon and anywhere outside of the body?

html

javascript

css

settings

sass

编辑