2012-11-13 12 views
6

मेरे पास एक मुख्य मेनू है जो jquery में क्लिक ईवेंट के साथ सबमेनस प्रदर्शित करेगा (क्लाइंट इसके बजाय होवर क्लिक करना चाहता था) इसलिए मुझे यह काम मिल गया, हालांकि मैं अभी भी एक चीज़ नहीं समझ सकता : मेरे पास मेनू और सबमेनस ठीक तरह से काम कर रहा है, इसलिए जब मैं "समाचार" पर क्लिक करता हूं तो उपमेनू अच्छी तरह से नीचे स्लाइड करता है और जब मैं "समाचार" पर वापस क्लिक करता हूं तो यह वापस बंद हो जाता है, हालांकि अगर समाचार 'सबमेनू खोलने के बाद और मैं "संसाधन" पर क्लिक करता हूं संबंधित सबमेनू प्रकट होता है लेकिन समाचार 'सबमेनू खुला रहता है, मैं चाहता हूं कि पिछले उपमेनू किसी अन्य मेनू आइटम पर क्लिक करें या मुख्य मेनू क्षेत्र के बाहर किसी भी विचार पर क्लिक करें? यहाँ मैं क्या मिला है:क्लिक पर खुले और बंद सबमेनस Jquery

<ul id="MainMenu"> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">About Us</a></li> 
     <li> 
       <a href="#">News</a> 
       <ul class="noJS"> 
       <li><a href="#">sub menu 1</a></li> 
       <li><a href="#">sub menu 2</a></li> 
       <li><a href="#">sub menu 3</a></li> 
       <li><a href="#">sub menu 4</a></li> 
       <li><a href="#">sub menu 5</a></li> 
       <li><a href="#">sub menu 6</a></li> 
      </ul>       
     </li> 
     <li><a href="#">Jobs</a></li> 
     <li><a href="#">Contact Us</a></li> 
     <li><a href="#">Admin</a></li> 
     <li> 
      <a href="#">Resources</a> 
      <ul class="noJS"> 
       <li><a href="#">sub menu 1</a></li> 
       <li><a href="#">sub menu 2</a></li> 
       <li><a href="#">sub menu 3</a></li> 
       <li><a href="#">sub menu 4</a></li> 
       <li><a href="#">sub menu 5</a></li> 
       <li><a href="#">sub menu 6</a></li> 
      </ul> 
     </li> 
     <li class="lastChild"><a href="#">New Button</a></li> 
    </ul> 

और jQuery:

$(function(){ 
$('#MainMenu').find('> li').click(function(){ 
    $(this).find('ul') 
    .stop(true, true).slideToggle(400); 
    return false;  
});  
}); 

उत्तर

7

इस

$(function() { 
    $('#MainMenu > li').click(function(e) { // limit click to children of mainmenue 
     var $el = $('ul',this); // element to toggle 
     $('#MainMenu > li > ul').not($el).slideUp(); // slide up other elements 
     $el.stop(true, true).slideToggle(400); // toggle element 
     return false; 
    }); 
    $('#MainMenu > li > ul > li').click(function(e) { 
     e.stopPropagation(); // stop events from bubbling from sub menu clicks 
    }); 
});​ 

http://jsfiddle.net/Ssu32/

+0

यह काम करता है! हालांकि पेज – Joxmar

+0

पर कहीं और क्लिक करते समय मैं सबमेनस को बंद नहीं कर सकता हूं, क्या आप एक उदाहरण बना सकते हैं ताकि मैं आपकी समस्या निवारण कर सकूं? मैं केवल यह मान सकता हूं कि समस्या क्या है। मुझे लगता है कि आपको अपने शरीर/एचटीएमएल पर क्लिक करना होगा और तत्वों को स्लाइडअप बनाना होगा –

+0

क्या यह काम करेगा? http://jsfiddle.net/joxmar/m4Nwe/ – Joxmar

2

की तरह कुछ प्रयास करें बस अपने कोड में इस लाइन जोड़े

$('#MainMenu > li').not(this).find('ul').slideUp(); 

पूर्ण कोड

$('#MainMenu').find('> li').click(function() { 
    $('#MainMenu > li').not(this).find('ul').slideUp(); 
    $(this).find('ul').stop(true, true).slideToggle(400); 
    return false; 
});​ 

Check Fiddle

+0

बहुत बहुत धन्यवाद यह भी काम करता है। – Joxmar