JQuery - रीसेट टॉगल स्थिति

Question

मेरे पास एक बटन है जो एक div ('.reportOptions') को प्रदर्शित/छुपाता है, यह पूरी तरह से ठीक काम करता है।

$('.reportOptions').click(function(e){ 
    e.stopPropagation(); 
}); 


$('.requestOptions').toggle(
    function(){ 
     $(this).parent().find('.reportOptions').css('display','block'); //show request options 
    },function(){ 
     $('.reportOptions').css('display','none'); //hide all request oprtions menus 
    } 
); 

एक ही div भी करने से इससे दूर क्लिक करके छिपा हो सकता है

$(document).click(function(){ 
    $('.reportOptions').css('display','none'); 
    $('.requestOptions').toggle(even); 
}); 

समस्या मैं पिछले समारोह के साथ किया है कि अगर यह किया जाता है मैं resuestOptions डबल क्लिक करना होगा निम्नलिखित div को फिर से प्रदर्शित करने के लिए बटन।

मैं क्या जानना चाहता हूं कि अगर कोई तरीका है जिसमें आप टॉगल फ़ंक्शन को बदलने के बिना टॉगल स्थिति को रीसेट कर सकते हैं।

Answer 1

jQuery के टॉगल विधि के लिए दस्तावेज़ पर एक नज़र डालें: http://api.jquery.com/toggle/

तुम भी एक पल लेने के लिए आगे यह माध्यम से पढ़ने के रूप में वहाँ शो() और छिपाने() तरीके हैं चाहते हो सकता है। तत्वों को दिखाने और छिपाने के लिए आपको सीएसएस ('प्रदर्शन', 'कोई नहीं') का उपयोग नहीं करना चाहिए क्योंकि शो और छुपा विधियां आपके लिए यह सब संभाल लेंगी और जब आप अपना कोड पढ़ते हैं तो यह बहुत कम भ्रमित होता है।

मुझे लगता है कि आपने इस स्थिति को थोड़ा अधिक विचार किया होगा। ऐसा करें:

$('.reportOptions').click(function(e){ 
    e.stopPropagation(); 
}); 


$('.requestOptions').click(
    function(e){ 
     $(this).parent().find('.reportOptions').show(); //show request options 
     $('.requestOptions').hide(); //hide all request oprtions menus 
     e.stopPropagation(); 
    } 
); 


$(document).click(function(){ 
    $('.reportOptions').hide(); 
    $('.requestOptions').show(); 
}); 

मूल रूप से आप बटन कि div पता चलता है और बटन और दस्तावेज है जो div छुपाता है और बटन से पता चलता करने के लिए एक क्लिक समारोह खाल के लिए क्लिक करें समारोह बाध्यकारी रहे हैं। बटन और डिव स्टॉप प्रचार पर क्लिक (जो कि आप पहले बटन में गायब थे) ताकि दस्तावेजों पर क्लिक किया जा सके जब उन तत्वों पर क्लिक किया गया हो।

Answer 2

सीएसएस को सीधे बदलने के बजाय, कक्षा का नाम जोड़ें (और इसे अपने सीएसएस में परिभाषित करें)। फिर सामान्य पर वापस लौटने के लिए बस वर्ग का नाम हटा दें।