मोबाइल और डेस्कटॉप के बीच ड्रॉपडाउन पर होवर टॉगल करना

Question

मेरे पास कुछ सरल जेएस है जो ब्राउज़र की चौड़ाई के आधार पर एचटीएमएल को हटाता या जोड़ता है। यदि यह मोबाइल में है तो विशेषता data-hover हटा दी जानी चाहिए। यदि चौड़ाई डेस्कटॉप में है, तो विशेषता जोड़ा जाना चाहिए।

अब तक यह बहुत अच्छा काम करता है, लेकिन समस्या यह है कि बूटस्ट्रैप यह नहीं पहचानता कि data-hover हटा दिया गया है। ड्रॉपडाउन अभी भी बंद हो जाता है जब उपयोगकर्ता का माउस ड्रॉपडाउन छोड़ देता है। स्पष्ट होने के लिए, जब ड्रॉप विंडो की चौड़ाई 768px से नीचे होती है तो उपयोगकर्ता ड्रॉप डाउन छोड़ देता है जब ड्रॉपडाउन खुला रहता है।

क्या गलत है और मैं इसे कैसे ठीक करूं? विशेषता पूरी तरह से दूर करने के

जे एस

$(document).ready(function() { 
    $(window).resize(function() { 
    if ($(window).width() < 768) { 
     $('.dropdown-toggle').removeAttr('data-hover'); 
    } else { 
     $('.dropdown-toggle').attr('data-hover', 'dropdown'); 
    } 
    }); 
}); 

एचटीएमएल

<a class="dropdown-toggle" data-hover="dropdown" data-toggle="dropdown" role="menu" aria-expanded="false" href="/courses"> 
    Courses    
</a> 

<ul class="dropdown-menu courses-dropdown"> 
    <li>hello</li>        
</ul> 

Answer 1

नोट: समाधान एक रिक्त स्ट्रिंग पर data-hover की स्थापना यदि आप responsibly built dropdown hover plugin उपयोग कर रहे हैं काम करेंगे के संबंध में BDD द्वारा प्रदान की। हालांकि, ओपी rather poorly built dropdown hover plugin का उपयोग कर रहा था और यह उत्तर उस प्लगइन के साथ समस्याओं को टेप करने में काम करता है।

ऐसा प्रतीत होता है कि data-hover बूटस्ट्रैप्स ड्रॉपडाउन का हिस्सा नहीं है बल्कि some guys extension to bootstrap है। बड़े पैमाने पर आपके और समुदाय के लिए दुर्भाग्यपूर्ण व्यक्ति ने अपनी प्लगइन को नष्ट करने का कोई तरीका नहीं दिया। यह हमेशा मुझे आश्चर्यचकित करता है कि प्लगइन लेखक कभी भी अपने प्लगइन को फाड़ने का तरीका नहीं देते क्योंकि यह स्मृति रिसाव का एक गंभीर कारण है और यह सामान्य रूप से खराब प्रोग्रामिंग है। </rant>

चीजों को सही बनाने के लिए, आपको स्वयं को ईवेंट को मैन्युअल रूप से अनइंड और रीबंड करना होगा। फिर, आपके और समुदाय के लिए दुर्भाग्यपूर्ण, उन्होंने hover घटनाओं का नाम नहीं रखा - जो फिर से वास्तविक गैर जिम्मेदार प्लगइन विकास (अंदर रो रहा है) है। चूंकि हम इस काम को करने जा रहे हैं कि प्लगइन लेखक को करना चाहिए था, हम प्लगइन का विस्तार भी कर सकते हैं और इसे प्रकट कर सकते हैं जैसे लेखक जानता था कि वह क्या कर रहा था। कृपया ध्यान दें कि यदि पृष्ठ पर कोई अन्य कार्यक्षमता hover ईवेंट को ड्रॉपडाउन में जोड़ रही है, तो कार्यक्षमता तोड़ने जा रही है (ऐसा इसलिए है क्योंकि लेखक ने अपनी घटनाओं का नाम नहीं दिया है)।

$.fn.dropdownHover.disableAll = function() { 
    $('[data-hover="dropdown"]').each(function() { 
     $(this).off('hover').parent().off('hover').find('.dropdown-submenu').off('hover'); 
    }); 
}); 

$.fn.dropdownHover.enableAll = function() { 
    $('[data-hover="dropdown"]').dropdownHover(); 
}); 

है और अब अपने आकार घटना के अंदर आप कुछ इस तरह करना चाहिए:

var $window = $(window); 
$(document).ready(function() { 
    $window.resize(function() { 
    if ($window.width() < 768) { 
     $.fn.dropdownHover.disableAll(); 
    } else { 
     $.fn.dropdownHover.enableAll(); 
    } 
    }); 
}); 

आप उपरोक्त कोड के साथ चारों ओर खेलने के लिए के बाद से मैं वास्तव में इस परीक्षण नहीं कर सकते हो सकता है। अगर यह काम करता है या नहीं तो मुझे बताएं। और चूंकि हम इस काम में चले गए हैं, इस दुनिया में सबकुछ अच्छा होने के लिए आप कृपया disableAll फ़ंक्शन पर कॉल करें यदि आप इसे एक पृष्ठ एप्लिकेशन पर उपयोग कर रहे हैं और वर्तमान पृष्ठ बदलता है। इस तरह आप स्मृति रिसाव को रोक सकते हैं। धन्यवाद।

Answer 2

इसके बजाय, आप तो ऐसा कुछ भी करने के लिए पुन: असाइन कर सकते हैं:

$('.dropdown-toggle').attr('data-hover', ''); 

अगर वहाँ करने के लिए सौंपा कोई मूल्य नहीं है विशेषता, यह कुछ भी नहीं करना चाहिए।