Как я могу скрыть это поле настроек при нажатии на значок шестеренки и в любом месте за пределами тела?

Вы можете попробовать это.

РЕДАКТИРОВАТЬ

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.info(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.info(clicked);
 }
});

Вы можете поместить блок настроек в другой блок, поместить настройки в align:center;, добавить из этого из z-index:; и сделать при нажатии на шестеренку или куда угодно, чтобы этот блок принял стиль display:none;. Это может помочь вам.

первая функция переключает поле настройки;

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