javascript - Removing class of nested list elements based off click on outer list element? -

मुझे वर्तमान में यह संरचना मिली है:

  & lt; ul id = "topic_categories" & gt ; & Lt; li & gt; & lt; a href = "" & gt; प्रकार 1 & lt; / a & gt; & lt; / li & gt; & Lt; li & gt; & lt; a href = "" & gt; प्रकार 2 & lt; / a & gt; & lt; / li & gt; & Lt; li & gt; & lt; a href = "" & gt; प्रकार 3 & lt; / a & gt; & Lt; ul class = "sub_topic_categories" & gt; & Lt; li & gt; & lt; एक वर्ग = "टूलटिप" href = "" & gt; ए & lt; / a & gt; & lt; a href = "" & gt; & lt; आईएमजी src = "" & gt; & lt; / a & gt; & lt; / li & gt ; & Lt; li & gt; एक वर्ग = "टूलटिप" href = "" & gt; बी & lt; / a & gt; & lt; a href = "" & gt; & lt; आईएमजी src = "" & gt; & lt; / a & gt; & lt; / li & gt; ; & Lt; li & gt; & lt; एक वर्ग = "टूलटिप" href = "" & gt; सी & lt; / a & gt; & lt; a href = "" & gt; & lt; आईएमजी src = "" & gt; & lt; / a & gt; & lt; / li & gt ; & Lt; li & gt; & lt; एक वर्ग = "टूलटिप" href = "" & gt; डी & lt; / a & gt; & lt; a href = "" & gt; & lt; आईएमजी src = "" & gt; & lt; / a & gt; & lt; / li & gt ; & Lt; li & gt; & lt; एक वर्ग = "टूलटिप" href = "" & gt; ई & lt; / a & gt; & lt; a href = "" & gt; & lt; आईएमजी src = "" & gt; & lt; / a & gt; & lt; / li & gt ; & Lt; li & gt; & lt; एक वर्ग = "टूलटिप" href = "" & gt; एफ & lt; / a & gt; & lt; a href = "" & gt; & lt; आईएमजी src = "" & gt; & lt; / a & gt; & lt; / li & gt ; & Lt; li वर्ग = "सक्रिय" & gt; एक वर्ग = "टूलटिप" href = "" & gt; जी & lt; / a & gt; & lt; a href = "" & gt; & lt; img src = "" & gt; & lt; / एक & gt; & lt; / li & gt; & Lt; / ul & gt; & Lt; / li & gt; & Lt; li वर्ग = "सक्रिय" & gt; & lt; a href = "" & gt; टाइप 4 & lt; / a & gt; & Lt; ul class = "sub_topic_categories" & gt; & Lt; li & gt; & lt; एक वर्ग = "टूलटिप" href = "" & gt; ए & lt; / a & gt; & lt; a href = "" & gt; & lt; आईएमजी src = "" & gt; & lt; / a & gt; & lt; / li & gt ; & Lt; li & gt; एक वर्ग = "टूलटिप" href = "" & gt; बी & lt; / a & gt; & lt; a href = "" & gt; & lt; आईएमजी src = "" & gt; & lt; / a & gt; & lt; / li & gt; ; & Lt; li & gt; & lt; एक वर्ग = "टूलटिप" href = "" & gt; सी & lt; / a & gt; & lt; a href = "" & gt; & lt; आईएमजी src = "" & gt; & lt; / a & gt; & lt; / li & gt ; & Lt; li & gt; & lt; एक वर्ग = "टूलटिप" href = "" & gt; डी & lt; / a & gt; & lt; a href = "" & gt; & lt; आईएमजी src = "" & gt; & lt; / a & gt; & lt; / li & gt ; & Lt; li & gt; & lt; एक वर्ग = "टूलटिप" href = "" & gt; ई & lt; / a & gt; & lt; a href = "" & gt; & lt; आईएमजी src = "" & gt; & lt; / a & gt; & lt; / li & gt ; & Lt; li & gt; & lt; एक वर्ग = "टूलटिप" href = "" & gt; एफ & lt; / a & gt; & lt; a href = "" & gt; & lt; आईएमजी src = "" & gt; & lt; / a & gt; & lt; / li & gt ; & Lt; li वर्ग = "सक्रिय" & gt; एक वर्ग = "टूलटिप" href = "" & gt; जी & lt; / a & gt; & lt; a href = "" & gt; & lt; img src = "" & gt; & lt; / एक & gt; & lt; / li & gt; & Lt; / ul & gt; & Lt; / li & gt; & Lt; / ul & gt;   
 असल में मैं क्या करना चाहता हूं;  
 
 
 पहले  li a  तत्व पहले  ul < / कोड> क्लिक किया जाता है सूची घटक में  सक्रिय  वर्ग जोड़ा जाता है मैंने इसे अभी तक  $ (this) .parents ('li') का उपयोग करके किया है। AddClass ("सक्रिय");    
 
 अगला   
  उल   उप_पश्चिक्षित  प्रदर्शित किया जाता है (मैं सीएसएस के माध्यम से यह किया है और यह काम करता है)।   
 < P> यह वह हिस्सा है जिस पर मैं फंस गया हूं। अब मुझे  sub_topic_category  प्रदर्शित किए गए परिवर्तन वर्ग के भीतर केवल सूची तत्व बनाने की आवश्यकता है I जब एक सूची तत्व  एक  टैग को क्लिक किया जाता है तो वर्ग <कोड> सक्रिय  को  li  लिंक के अभिभावक क्लिक किया जाता है और पिछले  सक्रिय  वर्ग को उस विषय विषय सूची के अंदर ही हटा दिया जाता है।    
 
 उदाहरण के लिए दिखाए गए कोड में मुझे  Type4  को सक्रिय रूप में सेट किया गया है पहला  उल  दूसरी सूची हाइ-कोडित एचटीएमएल के माध्यम से सक्रिय करने के लिए सेट की गई पहली सूची तत्व (ब्राउज़र पर देखी गयी) के साथ  उप-विषयक टैग  प्रदर्शित की जाती है। जब मैं कहता हूं तो  ए  पर क्लिक करें  सक्रिय  को सूची तत्व  G  से हटा दिया गया और फिर  A  में जोड़ा गया। यह केवल इस  उप-सूचीग्राम  सूची को प्रभावित करना होगा।  
 मुझे आशा है कि मैंने इस अच्छी तरह से व्याख्या की है। फिलहाल मेरे पास  
  $ ('# topic_categories li ul.sub_topic_categories li.active')। RemoveClass ('सक्रिय');   
 जो काम करता है लेकिन यह  Type3  sub_topic_categories सूची में पाया सक्रिय तत्वों को हटा देता है।  
 किसी भी मदद की सराहना की जाएगी।  ए  -  
  
  
 
 
 । कोड> $ (this) .closest ( 'उल') लगता है ( 'li.active') removeClass ( 'सक्रिय')। $ (यह) .closest ('li')। AddClass ('सक्रिय')   
 डेमो  ------- & gt;