javascript - jQuery – Hide menu/sidebar when click in the body area -


I'm new to jQuery normally and am trying to work in this sidebar in general and coding in general. When you click on the INFO link, a sidebar opens just as you can just close the sidebar by clicking on the X in the corner, but whenever you click in the body area (but when you click in the sidebar area Do not) still want to be able to close the sidebar. I got to work this way, but then I was not able to open any of my links to see my projects (only another project, Frankenstein Ebook, now has a working link).

Also, why are you able to click on full width rather than X instead of X to close the sidebar?

I have seen a lot of problems here, but never enough to match it very well for mine.

And here's a JSFiddle:

My HTML: / p> 

  & lt; Div class = "wrap" & gt; & Lt; -! Sidebar - & gt; & Lt ;! - Info panel - & gt; & Lt; Div class = "infopanel" & gt; & Lt; Nav class = "closeBtn" & gt; & Lt; A href = "#" & gt; X & lt; / A & gt; & Lt; / Neo & gt; & Lt; Div class = "infoText" & gt; & Lt; H2 & gt; infoPanel & lt; / H2 & gt; & Lt; P & gt; Copy goes here. & Lt; / P & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Section square = "sidebar" & gt; & Lt; Div class = "sidebarNav" & gt; & Lt; NAV & gt; & Lt; One class = "infoLink" href = "#" & gt; INFO & lt; / A & gt; & Lt; / Neo & gt; & Lt; / Div & gt; & Lt; Div class = "content" & gt; & Lt; Section class = "project" & gt; & Lt; Div class = "wrapper" & gt; & Lt; Ul square = "grid" & gt; & Lt; Li & gt; & Lt; A href = "prj.html" & gt; & Lt; Div class = "caption" & gt; & Lt; Span & gt; Image go here & lt; / Span & gt; & Lt; / Div & gt; & Lt; Img src = "http://educ.jmu.edu/~diazjr/portfolio_website/images/coming_soon.jpg" /> & Lt; / A & gt; & Lt; / li & gt; & Lt; Li & gt; & Lt; A href = "prj.html" & gt; & Lt; Div class = "caption" & gt; & Lt; Span & gt; Image go here & lt; / Span & gt; & Lt; / Div & gt; & Lt; Img src = "http://educ.jmu.edu/~diazjr/portfolio_website/images/coming_soon.jpg" /> & Lt; / A & gt; & Lt; / li & gt; & Lt; Li & gt; & Lt; A href = "prj.html" & gt; & Lt; Div class = "caption" & gt; & Lt; Span & gt; Images go here & lt; / Span & gt; & Lt; / Div & gt; & Lt; Img src = "http://educ.jmu.edu/~diazjr/portfolio_website/images/coming_soon.jpg" /> & Lt; / A & gt; & Lt; / li & gt; & Lt; Li & gt; & Lt; A href = "prj.html" & gt; & Lt; Div class = "caption" & gt; & Lt; Span & gt; Image go here & lt; / Span & gt; & Lt; / Div & gt; & Lt; Img src = "http://educ.jmu.edu/~diazjr/portfolio_website/images/coming_soon.jpg" /> & Lt; / A & gt; & Lt; / li & gt; & Lt; / Ul & gt; & Lt; / Div & gt; & Lt; / Section & gt; & Lt; / Div & gt; & Lt; / Section & gt;   
  
 My JS:  
  $ (document) .ready (function () {var menu = "close"; $ ('.infoLink') Click (function (if (menu == "close") {$ ('. InfoPanel'). css ('- webkit-conversion', 'translation (0,0)') ; Menu = "open";} and {$ ('. InfoPanel'). CSS ('- WebKit-conversion', 'translation (100%, 0)'); menu = "off";}}); $ ( '($ -' info.panel '). CSS (' webkit-conversion ',' translation (0,0) '); menu = "open";} and {$ ('. InfoPanel '). CSS (' - WebKit-Conversion ',' Translation (100%, 0) '); Menu = "Close";}});});    
 
 
 
 its Besides, why can you click on the full width to close the sidebar instead of X to X?   
 Because  $ ('. CloseBtn')  < Code> div  is the code> and no links, instead use  $ ('. CloseBtn a') .  
 Anyway, a And need to repeat the quick and dirty way (a bit of refactoring), but the idea is. If you do this work, I will comment on it:  
  $ (document) .ready (function () {var menu = "close"; var $ infoLink = $ (". InfoLink "); Var $ infoPanel = $ (" InfoPanel "); var $ closeButton = $ (". CloseBtn one "); var $ document = $ (document); $ infoLink.on (" click.nav ", function ( E) Northeast Default (); e.stopPropagation (); Sidebar ("Open");}); closebutton.on ("click.nav", function (e) {e.preventDefault (); e.stopPropagation (); Sidebar ("close");}); $ document.on ("click.nav", function (e) {if (! $ InfoPanel.is (e.target) and $ infoPanel.has (E.target) .length === 0) {sidebar ("off")}}} function sidebar (verb) (Action == "Open") {$ ('InfoPanel'). CSS ('-WebKit-transform', 'translation (0,0)'); menu = "open";} and if (action == "Close") {console.log ("stuff"); $ ('. InfoPanel'). Css ('- webkit-conversion', 'translation (100%, 0)'); menu = "off";}} });

Comments

Post a Comment

Popular posts from this blog

Verilog Error: output or inout port "Q" must be connected to a structural net expression -

I get the error every time, I try to compile. I'm not sure why anyone can help is? I'm new to verilog. Module D_FF (clerk, d, reset_n, q); Input D, Clack, reset_en; Output Q; reg Q; lab4_gdl f1 (.lk (~ clk), d (d), .q.m (qm)); lab4_GDL f2 (.Clk (Clk), D (QM), .Q (Q)); Always start at @ (posedge clk, neggeous reset_n) (Reset_n == 0) Q & lt; = 0; Other questions & lt; = D; Edit End: The problem is what we are asking to do: In this section, you apply the memory / registration circuit on the AlterEdie 2 board. will do. The circuit has the following specifications: The present value of swift SW15-0 on the D2 board should be shown in four hexadecimal four sections of HEX3-0. This part of the circuit will be combination logic. To use an active-less asynchronous reset and KEY1 to use KEY0 as the clock input, you must store SW15-0in in a 16-bit register in the value The register should be enabled to have a 16-bit positive edge, which uses the embedded D flip-flo
Read more

jasper reports - How to center align barcode using jasperreports and barcode4j -

I use iReport 5.5.0 . How to align a barcode component to the center The relevant piece of my jrxml is below & Lt; JR: Code 128 xmlns: JR = "http://jasperreports.sourceforge.net/jasperreports/components" xsi: schemaLocation = "http://jasperreports.sourceforge.net/jasperreports/components http: //jasperreports.sourceforge Purge / xsd / components.xsd "textPosition =" bottom "& gt; & Lt; Jr: codeExpression & gt; & Lt; [CDATA [$ F {number}]] & gt; & Lt; / Jr: codeExpression & gt; & Lt; / Jr: Code 128 & gt; & Lt; / componentElement & gt; "Text" itemprop = "text"> Create a style after this, it is called "barcode", like: & lt; Style name = "barcode" fontName = "Helvetica" fONTSIZE = "10" hAlign = "center" valign = "center" /> and set the property of your barcode element to "barcode".
Read more

c# - ASP.NET MVC - Attaching an entity of type 'MODELNAME' failed because another entity of the same type already has the same primary key value -

In brief, the wrapper module is inserted during posting and the status of an entry is changed to 'modified' . Before changing the state, the state is set to 'separate', but calling attachments () causes the same error to be thrown away. I am using EF 6. Model / wrapper class public class avi model {public A is a {get; Set; } Public listing & lt; B & gt; B {received; Set; } Public cc {receipt; Set; }} Administrator edit public functioning (int? id) {if (id == null) {new HttpStatusCodeResult (HttpStatusCode.BadRequest); } If (! Conveyor Access (id.Value)) new HTTPTitus code result (HTTP status code. Forbidden); Var aViewModel = new AViewModel (); aViewModel.A = db.As.Find (id); If (aViewModel.Receipt == zero) {return HttpNotFound (); } aViewModel.b = db.Bs.Where (x => x.aid == id.Value) .Oolist (); AViewModel.Vendor = db.Cs.Where (x => x.cid == aViewModel.a.cID) .FirstOrDefault (); See Return (aViewModel); } [HTPFost] [Valid AntitiferousTeacon
Read more