कैसे एक div टैग पर जावास्क्रिप्ट onclick उपयोग करने के लिए एक अनुभाग है कि क्लिक करने योग्य लिंक शामिल की दृश्यता टॉगल करने के लिए?

वोट
8

हाय, मैं एक DIV अनुभाग है कि केवल इसके शीर्षक दिखाई शुरू में मिल गया है। क्या मैं प्राप्त करने के लिए चाहते हैं कि जब आगंतुक के क्षेत्र पर कहीं भी क्लिक है div दिखाई / छुपा के बीच टॉगल करता है।toggle_sectiontoggle_stuff

<div id=toggle_section 
     onclick=javascript: new Effect.toggle('toggle_stuff', 'slide');>
    <div id=toggle_title>Some title</div>
    <div id=toggle_stuff>
        some content stuff
        <a href=/foo.php>Some link</a>
    </div>
</div>

हालांकि, जिस तरह से यह सेट अप है अभी, अगर मैं किसी भी राशि <a>के भीतर लिंक toggle_section, उस लिंक भी ऑनक्लिक ईवेंट निष्पादित करेंगे क्लिक करना।

तो मेरे सवाल का क्या व्यवहार के इस प्रकार स्थापित करने के लिए सबसे अच्छा तरीका होगा है?

04/01/2009 को 18:59
का स्रोत उपयोगकर्ता
अन्य भाषाओं में...                            


5 जवाब

वोट
0

मैं वास्तव में अगर यह काम करेगा पता नहीं है, लेकिन लिंक तत्व एक बड़ा देने की कोशिश z-indextoggle_section div से मूल्य।

कुछ इस तरह :

#toggle_section a { z-index: 10; }
04/01/2009 को 19:38
का स्रोत उपयोगकर्ता

वोट
7

सबसे सरल उपाय है लिंक के लिए एक अतिरिक्त onclick हैंडलर जोड़ने के अपने DIV भीतर जो घटना प्रचार बंद हो जाता है:

<div id="toggle_section" 
     onclick="javascript: new Effect.toggle('toggle_stuff', 'slide');">
    <div id="toggle_title">Some title</div>
    <div id="toggle_stuff">
        some content stuff
        <a href="/foo.php"
            onclick="Event.stop(event);"
        >Some link</a>
    </div>
</div>

ऊपर के उदाहरण प्रोटोटाइप का उपयोग करता है Event.stop()के लिए एक पार ब्राउज़र घटना प्रसार को रोकने की सुविधा के लिए कार्य करते हैं।

आप इनलाइन का उपयोग के रूप में onclick()हैंडलर, सबसे (यदि सभी नहीं) ब्राउज़र पहले उत्साह से भरा हुआ चरण में घटना पार किए जाने (जो आप क्या चाहते हैं)।

इस व्यवहार के पीछे वास्तविक कारण और के बीच मतभेदों को समझने के लिए एक अच्छा मार्गदर्शक घटना कैप्चरिंग और घटना बुदबुदाती उत्कृष्ट में पाया जा सकता Quirksmode।

04/01/2009 को 20:01
का स्रोत उपयोगकर्ता

वोट
2

बाद मैं अपनी पहली प्रश्न पोस्ट मैं इसके बारे में एक बार फिर सोचने की कोशिश करने के लिए इंतजार नहीं कर सकता है और ऐसा लगता है कि मैं इस लक्ष्य को हासिल करने के लिए एक काफी आसान तरीका मिल गया है।

मैं onlick स्थानांतरित कर दिया Effect.toggleएक अलग समारोह में की तरह:

function someClick(event) {
    if (event.target.nodeName == 'A') {
        return;
    } else {
        new Effect.toggle('toggle_stuff', 'slide');
    }
}

मैं इस के लिए ही काम करेगा लगता है Aटैग और कुछ नहीं कुछ भी है कि यद्यपि क्लिक करने योग्य है।

04/01/2009 को 20:40
का स्रोत उपयोगकर्ता

वोट
0

एक ऑनक्लिक ईवेंट प्रचार को रोकने के लिए हैंडलर जोड़ें।

JQuery उपयोग के साथ: onclick = "event.stopPropagation ()"

प्रोटोटाइप उपयोग के साथ: onclick = "Event.stop (घटना)"

13/12/2010 को 12:33
का स्रोत उपयोगकर्ता

वोट
4

लिपि में:

function overlayvis(blck) {
  el = document.getElementById(blck.id);
  el.style.visibility = (el.style.visibility == 'visible') ? 'hidden' : 'visible';
}

उत्प्रेरक लिंक, सामग्री (कोई कारण नहीं है कि पृष्ठ पर और नहीं हो सकता है) के बाद:

<div onclick='overlayvis(showhideme)">show/hide stuff</div>
<div id="showhideme">
  ... content to hide / unhide ...
</div>

मैं से मिला मॉडल खिड़की जावास्क्रिप्ट सीएसएस ओवरले स्रोत के लिए खोज करने के लिए था और यह इस साइट था खोजने के लिए खुश था -। :)

24/10/2012 को 17:37
का स्रोत उपयोगकर्ता

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more