javascript - How can I click on one image and enlarge it and hide the remaining two images with jquery? -

यह मेरा html है:

  & lt; div class = "album1" & gt; & LT; ul & gt; & Lt; li वर्ग = "pic1" & gt; & lt; a href = "" & gt; & lt; img src = "#" alt = "" & gt; & lt; / a & gt; & lt; / li & gt; & Lt; li वर्ग = "pic2" & gt; & lt; a href = "" & gt; & lt; img src = "#" alt = "" & gt; & lt; / a & gt; & lt; / li & gt; & Lt; li वर्ग = "pic3" & gt; & lt; a href = "" & gt; & lt; img src = "#" alt = "" & gt; & lt; / a & gt; & lt; / li & gt; & Lt; / ul & gt; & Lt; / div & gt;  

मैं यह कैसे बना सकता हूं कि जब मैं किसी एक छवि पर क्लिक करता हूं, वह इमेज बढ़ता है और दूसरी दो छवियां गायब हो जाती हैं और फिर जब मैं छवि पर क्लिक करता हूं तो यह नियमित आकार पर वापस जाता है और अन्य दो छवियां दिखाई दे रही हैं?

मेरा जेएस:

  $ ("। एल्बम 1")। क्लिक करें (फ़ंक्शन (इवेंट) {event.preventDefault (); var largeImage $ (This) .attr ("rel"); console.log (largeImage); $ ("। एल्बम 1 ए")। बच्चों ()। RemoveClass ("वर्तमान इमेज"); $ (बड़ा छवि) .एडक्लासा ("वर्तमान इमेज" );});  

आप li तत्व पर घटना बाँध सकते हैं; उदाहरण के लिए:

$ ('। एल्बम 1 ली')। क्लिक करें (फ़ंक्शन () {$ (this) .siblings ('li')। टॉगल (); वापसी वापसी;}) < / P>