सब-आइटम jQuery पर क्लिक करने के बाद मेनू खोलें

मैंने खोजा है और वास्तव में नहीं मिला जो मैं खोज रहा था।

मेरे पास मेनू के साथ काम करने वाला मेरा मेनू है, इसलिए जब पृष्ठ को पुनः लोड किया जाता है तो यह मेनू को खुले, खुले रहते हैं।

लेकिन मुझे एहसास हुआ कि जब आप हाइपरलिंक 2 के उप-आइटम कहते हैं तो यह हाइपरलिंक 2 को पूरी तरह से बंद कर देगा। क्या कोई रास्ता भी खुला रहता है?

http://jsfiddle.net/Dnamixup/5S54v/

मैंने यहां लेकिन यह तब तक काम नहीं करता जब तक कि मैंने इसे गलत नहीं रखा।

मैं अभी भी जावास्क्रिप्ट/jQuery पर नया हूं लेकिन मैं धीरे-धीरे इसे प्राप्त कर रहा हूं!

धन्यवाद

jQuery(function ($) {
// jQuery code in here can safely use $
$('.nav li')
    .css({
    cursor: "pointer"
});

$(".drop")
    .on('click', function() {
    $(this).toggleClass('open');
    $(this).find('ul').toggle();
    $.cookie('open_items', 'the_value');
    openItems = new Array();
    $("li.drop").each(function (index, item) {
        if ($(item).hasClass('open')) {
            openItems.push(index);
        }
    });
    $.cookie('open_items', openItems.join(','));
});

if ($.cookie('open_items') && $.cookie('open_items').length > 0) {
    previouslyOpenItems = $.cookie('open_items');
    openItemIndexes = previouslyOpenItems.split(',');
    $(openItemIndexes).each(function (index, item) {
        $("li.drop").eq(item).addClass('open').find('ul').toggle();
    });
}
});
0

3 उत्तर

क्लिक किए गए बच्चों के प्रचार को रोकें:

डेमो

 $(".drop li a")
        .on('click', function (e) {
            e.stopPropagation();
        });
0
जोड़ा
हे सर, मेरे सुपरहीरो हैं! आपका बहुत बहुत धन्यवाद!
जोड़ा लेखक Dnamixup, स्रोत
@ ए। वोल्फ: +1 आपका उत्तर बहुत अच्छा है और समस्या को हल करता है। हालांकि ओपी को नोट करें, जबकि यह काम करता है, एक अतिरिक्त घटना हैंडलर को किसी समस्या को हल करने के लिए जोड़ा जाता है। आम तौर पर यह बिल्कुल ठीक है लेकिन आप अपने प्रारंभिक चयनकर्ता में अपने तत्वों को अधिक लक्षित करके पहली बार इस मुद्दे से बच सकते हैं। मेरा मुद्दा यह है कि किसी समस्या के आसपास काम करने के लिए समाधान क्यों लागू करें जिससे आप शुरू करने से बच सकते हैं?
जोड़ा लेखक Nope, स्रोत

Changing your selector for the click event to ".drop>a" seems to work. All you need to do then is manage the li slightly differently, similar to this:

$(".drop>a").on('click', function (eventData) {
    var $listItem = $(this).closest('li');

    $listItem.find('ul').toggle();
    $listItem.toggleClass('open');

    $.cookie('open_items', 'the_value');
    openItems = new Array();

    $("li.drop").each(function (index, item) {
        if ($(item).hasClass('open')) {
            openItems.push(index);
        }
    });
    $.cookie('open_items', openItems.join(','));
});

DEMO - Leaving menu open when inner link is clicked


0
जोड़ा
जवाब के लिए धन्यवाद :)
जोड़ा लेखक Dnamixup, स्रोत

आपको क्लिक ईवेंट को .drop तत्वों पर लागू नहीं करना चाहिए बल्कि उनके बच्चों के लिए। कुछ इस तरह:

<div class="drop">
   Click here to open
      
  • Sub links etc...
  • ...
</div> $('.drop .click-to-open').click(function() { //toggle the open class etc //use .parent() to access the .drop div $(this).parent().toggleClass('open'); });
0
जोड़ा
उत्तर के लिए धन्यवाद, मुझे लगता है कि उपर्युक्त टिप्पणी मूल रूप से इसे रोकती है लेकिन यह इसे साफ़ करती है :)
जोड़ा लेखक Dnamixup, स्रोत