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

इसलिए यदि मेनू दाईं ओर से ओवरफ़्लो है, तो बाईं ओर खुल रहा है। यदि मेनू नीचे से ओवरफ्लो है, तो ऊपर की ओर खुल रहा है।

यहाँ कोड है,

https://jsfiddle.net/um1vr3wq/

मैंने बहुत शोध किया। मुझे कुछ कोड मिले। लेकिन यह मेरे लिए ठीक से काम नहीं किया।

यह कोड "रिवर्स-राइट" क्लास को उन सभी डिव में जोड़ता है जिनमें समान क्लास होती है। मुझे यह नहीं चाहिए। मैं बस इसे क्लिक किए गए div में जोड़ना चाहता हूं।

$(window).resize(function() {
    windowWidth = window.innerWidth ? window.innerWidth : $(window).width();
    if (windowWidth < 1730) {
        $('.dropdown-content').addClass('reverse-right');
    }
    else {
        $('.dropdown-content').removeClass('reverse-right');
    }
});

यह कोड सही ढंग से काम करता है। लेकिन यह वह नहीं है जो मैं चाहता हूं। यह केवल तभी स्थिति निर्धारित करता है जब ".dropbtn" पर क्लिक किया जाता है। मैं चाहता हूं कि जब मैं पृष्ठ को तुरंत छोटा या बड़ा करूं तो मेनू स्थिति बदल जाए।

$(".dropbtn").click(function () {
    if ($(window).innerWidth() < 1730) {
        $(this).parents(".dropdown").children(".dropdown-content").addClass("reverse-right");
    }
    else {
      $(this).parents(".dropdown").children(".dropdown-content").removeClass("reverse-right");
    }
});

मैं जावास्क्रिप्ट के लिए नया हूँ और एक निश्चित समाधान की जरूरत है। क्या आप मेरी मदद कर सकते हैं?

(मेरी खराब अंग्रेजी के लिए खेद है। मैं इस पर काम कर रहा हूं।)

2
David Türkiye 7 नवम्बर 2019, 16:42

1 उत्तर

सबसे बढ़िया उत्तर

आपको ड्रॉपडाउन बॉक्स के ऊपर और बाएँ स्थिति की कुछ गणनाएँ करनी हैं, जिसमें ऊँचाई और चौड़ाई शामिल है। और अपनी स्थिति को उलटने के लिए कक्षाओं को टॉगल करें।

यहां लिंक है

> https://codepen.io/AsfanShaikh/pen/PooeazY
1
Asfan Shaikh 7 नवम्बर 2019, 17:43