How does JS put away the menu navigation bar when clicking elsewhere on the page?

problem description

The

menu bar is located on the far right of the body. The hidden way is to display the right:0; when the right:-135px; clicks the button.
close the right:-135px; to hide and close the effect. What you still want to achieve now is how to achieve the effect of hiding and closing when you click on a page other than the menu bar. By the way, is it appropriate for me to display and hide the menu bar in this way?

the environmental background of the problems and what methods you have tried

tried using $(document). Click (function () {.})
but to no avail

related codes

/ / Please paste the code text below (do not replace the code with pictures) 

// 
$("-sharpnav_open").click(function(){
    $("-sharpnav_big_div").css("right","0");
    $("-sharpnav_big_div").css("transition",".5s");
})
$("-sharpnav_close").click(function(){
    $("-sharpnav_big_div").css("right","-350px");
})

what result do you expect? What is the error message actually seen?

you can close the menu bar that is displayed when you want to click elsewhere on the page.

Html javascript
Apr.11,2021

layout the location of the navigation div and initialize the hiding. 

//
$(document).ready(function () {
   $("-sharpnav_big_div").hide();
}

//
$("-sharpnav_open").click(function(){
    $("-sharpnav_big_div").show();
})

//

$("body" ).on("click",function(){
  if($("-sharpnav_big_div").show()){
      $("-sharpnav_big_div").hide();
      }
      //
      //$("-sharpnav_close").click()
})

$(document).click(function(){
    if($("-sharpnav_big_div").css("right")!=0){
        $("-sharpnav_close").trigger('click');
        
    }else{
        $("-sharpnav_open").trigger('click');
    }
})

I'm not sure what $(document) is. In theory, it should be $(document.body) , which is what you see in the window. Then listen for the click event and deal with it later. In addition, you'd better judge whether the click is in the menu, and do not use multiple .css () . I don't remember that jquery caches the results, which may cause performance or unexpected problems: 

const nav = $('-sharpnav_big_div');
$(document.body).click(event => {
  if ($.contains(event.target, nav[0])) {
    return;
  }
  nav.addClass('hide');
});

Previous: This problem of $on () in vue

Next: When the official account obtains permanent material (picture), it prompts that media_id is invalid.

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b3e82b-2b160.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b3e82b-2b160.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?