मेरे पास एक साधारण HTML, CSS वेबसाइट है जो केवल मोबाइल साइट के लिए एनिमेटेड नेविगेशन के लिए जावास्क्रिप्ट का उपयोग कर रही है।

वर्तमान नेविगेशन

बटन के लिए HTML:

<div class="navigations">
    <div class="left">
        <div class="leftinner" id="left">
            <i class="fas fa-arrow-left"></i>
            <span id="lefttext">CONTACT</span>
        </div>
    </div>
    <div class="right">
        <div class="rightinner" id="right">
            <i class="fas fa-arrow-right"></i>
            <span id="righttext">WEBSITE</span>
        </div>
    </div>
</div>

जब उपयोगकर्ता संपर्क बटन पर क्लिक करता है तो यह एक जेएस फ़ंक्शन ट्रिगर करता है जो निम्न चलाता है:

document.getElementById('main').classList.add('slideright');
document.getElementById('left').style.display = 'none';

मेरे पास समस्या यह है कि जब उपयोगकर्ता संपर्क बटन पर क्लिक करता है तो यह वेबसाइट बटन को भी ट्रिगर करता है, लगभग जैसे कि वेबसाइट बटन में संपर्क बटन पर छुपा ओवरलैप होता है। मैंने फ्लेक्स बॉक्स, फ्लोट लेफ्ट, फ्लोट लेफ्ट और राइट, डिस्प्ले इनलाइन ब्लॉक, टेबल-सेल के साथ डिस्प्ले टेबल, कॉलम आदि का उपयोग करने का प्रयास किया है। यह समस्या केवल एंड्रॉइड के लिए क्रोम पर बनी रहती है, लेकिन आईफोन और अन्य ब्राउज़रों पर ठीक काम करती है।

इस मुद्दे को ठीक करने का सबसे अच्छा तरीका क्या होगा?

क्षमा करें, मैं एनडीए कारणों से केवल स्क्रीनशॉट से अधिक साझा नहीं कर सकता।

संपादित करें

यहाँ नेविगेशन बटन के लिए CSS है, यह फ्लोट बाएँ और दाएँ प्रयास का उपयोग करता है।

.navigations .left {
    width: 50%;
    height: 100%;
    z-index: 500;
    display: block;
    float: left;
}

.navigations .left .leftinner {
    background-color: #ffcb05;
    border-top: 6px solid #000;
    border-right: 3px solid #000;
    width: 100%;
    height: 100%;
    display: inline-block;
}

.navigations .right {
    width: 50%;
    height: 100%;
    z-index: 500;
    display: block;
    float: right;
}

.navigations .right .rightinner {
    background-color: #ffcb05;
    border-top: 6px solid #000;
    border-left: 3px solid #000;
    width: 100%;
    height: 100%;
    display: inline-block;
}
0
Paul Murdoch 8 मार्च 2020, 22:29
क्या आप कम से कम तत्वों के इस ब्लॉक के लिए उपयोग किए गए सीएसएस को साझा कर सकते हैं?
 – 
Ziad Darwich
9 मार्च 2020, 00:08
कुछ समस्या निवारण लीड: ईवेंट हैंडलर कंसोल में। ईवेंट को लॉग करें। यह पुष्टि करने के लिए कि क्या क्लिक किया जा रहा है। बस एक यादृच्छिक क्या-अगर: यदि आपने ईवेंट श्रोता को कक्षा के नाम से किसी चीज़ से जोड़ा है और फिर कक्षा का नाम बदल दिया है तो ईवेंट श्रोता नहीं चलेगा। यदि आपने पहले से नहीं किया है: डिबगिंग के लिए क्रोम के देव उपकरण का उपयोग करने के लिए आप अपने एंड्रॉइड फोन को कंप्यूटर में प्लग कर सकते हैं।
 – 
Sydney Y
9 मार्च 2020, 03:06
मैंने बाएँ और दाएँ बटन के लिए उपयोग किए गए CSS को जोड़ा है।
 – 
Paul Murdoch
9 मार्च 2020, 06:10

1 उत्तर

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

तो मैं इसके साथ इस मुद्दे को हल करने में कामयाब रहा।

ऐसा लगता है कि राइट हैंड साइड बटन के अंदर टेक्स्ट पर फ्लोट सही अपराधी था। float: right; के बजाय text-align: right; का उपयोग करके दाएं बटन ने अपने टेक्स्ट को दाईं ओर ले जाने के तरीके को बदलने से समस्या हल हो गई।

ऐसा लगता है कि टेक्स्ट के फ्लोटिंग राइट ने टेक्स्ट की चौड़ाई 100% बना दी है और बाईं ओर के बटन को ओवरलैप कर दिया है।

0
Paul Murdoch 9 मार्च 2020, 13:06