होवर के बजाय क्लिक को खोलने/बंद करने के लिए ड्रॉपडाउन मेनू कैसे प्राप्त करें?

Question

मैं जावास्क्रिप्ट और AJAX/jquery के लिए बहुत नया हूं और ड्रॉप स्क्रिप्ट को खोलने और बंद करने के बजाय ड्रॉप मेनू को बंद करने की कोशिश करने पर काम कर रहा हूं।

प्रश्न में मेनू http://www.gamefriction.com/Coded/ पर पाया गया है और शीर्षलेख के नीचे दाईं ओर स्थित अंधेरा मेनू है। मैं इसे अन्य मेनू की तरह खोलना और बंद करना चाहता हूं जो नीचे है (यह हल्का भूरा है और "चयन प्रभाग" मॉड्यूल में है)।

ग्रे मेनू मेनू का हिस्सा है और भाषा मेनू नहीं है।

मेरे पास एक jquery आयात भी है जो उपरोक्त लिंक के दृश्य स्रोत में पाया जा सकता है।

मेरे जावास्क्रिप्ट कोड:

<script type="text/javascript"> 

/* Language Selector */ 

$(function() { 
    $("#lang-selector li").hover(function() { 
     $('ul:first',this).css('display', 'block'); 
    }, function() { 
     $('ul:first',this).css('display', 'none'); 
    }); 
}); 

$(document).ready(function(){ 

    /* Navigation */ 
    $('.subnav-game').hide(); 
    $('.subnav-game:eq(0)').show(); 
    $('.preorder-type').hide(); 


    $('.preorder-type:eq(3)').show(); 


}); 


</script> 

मेरे सीएसएस:

#lang-selector 
    { 
    font-size: 11px; 
    height: 21px; 
    margin: 7px auto 17px auto; 
    width: 186px; 
    } 

#lang-selector span 
    { 
    color: #999; 
    float: left; 
    margin: 4px 0 0 87px; 
    padding-right: 4px; 
    text-align: right; 
    } 

#lang-selector ul 
    { 
    float: left; 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    } 

#lang-selector ul li a 
    { 
    padding: 3px 10px 1px 10px; 
    } 

#lang-selector ul, #lang-selector a 
    { 
    width: 186px; 
    } 

#lang-selector ul ul 
    { 
    display: none; 
    position: absolute; 
    } 

#lang-selector ul ul li 
    { 
    border-top: 1px solid #666; 
    float: left; 
    position: relative; 
    } 

#lang-selector a 
    { 
    background: url("http://www.gamefriction.com/Coded/images/language_bg.png") no-repeat; 
    color: #666; 
    display: block; 
    font-size: 10px; 
    height: 17px; 
    padding: 4px 10px 0 10px; 
    text-align: left; 
    text-decoration: none; 
    width: 166px; 
    } 

#lang-selector ul ul li a 
    { 
    background: #333; 
    color: #999; 
    } 

#lang-selector ul ul li a:hover 
    { 
    background: #c4262c; 
    color: #fff; 
    } 

मेरे HTML:

<div id="lang-selector"> 
     <ul> 
     <li> 
     <a href="#">Choose a Language</a> 
     <ul> 
     <li><a href="?iw_lang=en">English</a></li> 
     <li><a href="?iw_lang=de">Deutsch</a></li> 
     <li><a href="?iw_lang=es">Espa&ntilde;ol</a></li> 
     <li><a href="?iw_lang=fr">Fran&ccedil;ais</a></li> 
     <li><a href="?iw_lang=it">Italiano</a></li> 
     </ul> 
     </li> 
     </ul> 
    </div> 

धन्यवाद!

Jquery Events

Jquery में घटनाओं के बारे में अधिक जानने के लिए:

Answer 1

$(function() { 
    $("#lang-selector li:first").click(function(){ 
     $('ul:first',this).toggle(); 
    }) 
}); 

टॉगल का उपयोग की आवश्यकता होगी तो खोलने reclick के लिए क्लिक करें करके अपने .hover बदल कुछ इस तरह तो क्या करना होगा ...

$(function() { 
$("#lang-selector > li").click(function() { 
    $('ul:first',this).toggleClass('active'); 
}); 
}); 

और,, सीएसएस में जोड़ें:

.active { display: block; } 

< < संपादित करें: निकाला गया सीएसएस प्रतिपादन दक्षता के लिए ".active" वर्ग >>

भी सुनिश्चित करें कि उप एनएवी < उल > है बनाने से "उल" "प्रदर्शन: कोई नहीं;" अपने सीएसएस में डिफ़ॉल्ट रूप से।

यह कर देगा तो # lang-चयनकर्ता में एक < ली > टैग पर क्लिक, लेकिन कोई उप एनएवी < उल > टैग या तो खुले या उप एनएवी बंद करते हैं, यह इस पर निर्भर वर्तमान स्थिति यह है कि।

आप होने की पहुंच के बारे में चिंतित हैं: उप एनएवी पर डिफ़ॉल्ट रूप से "प्रदर्शन कोई नहीं", तो आप कुछ इस तरह कर सकते हैं ...

$(function() { 
    $("#lang-selector li ul").addClass("hidden"); 
    $("#lang-selector li").click(function(e) { 
     e.preventDefault(); 
     $('ul:first',$(this)).toggleClass('hidden active'); 
    }); 
}); 

< < संपादित करें: परिवर्तित चयनकर्ताओं प्रदान किए गए उदाहरण से मिलान करने के लिए, "यह" jQuery ऑब्जेक्ट में बदल गया। >>

और फिर भी सीएसएस

.hidden { display: none; } 

में जोड़ने के इस परिदृश्य में, आप डिफ़ॉल्ट रूप से < उल > प्रदर्शित है, तो जब दस्तावेज़ लोड होने के लिए, jQuery के लिए "छिपा" वर्ग कहते हैं उन सभी को छिपाने के लिए, फिर < ली > के क्लिक पर यह छुपा और सक्रिय कक्षाओं को टॉगल करेगा, उन्हें प्रदर्शित करेगा या उन्हें छुपाएगा।

आपको सीएसएस में अपने # लैंग-चयनकर्ता उल उल से अपने वर्तमान "डिस्प्ले: कोई नहीं" को हटाने की भी आवश्यकता होगी, अन्यथा यह छुपा/सक्रिय कक्षाओं पर प्राथमिकता लेता है।

Answer 2

खोज इस $("#lang-selector li").hover और, साथ

$("#lang-selector li").click 

Answer 3

.hover की जगह .click, .something, सभी ट्रिगर कर रहे हैं, इस लिंक को देखना !

पी.एस.: सुशील bharwani (यह वोट), सही है, बस बंद करने के लिए

Answer 4

मैं .click

Answer 5

यदि आप एक क्लिक करें घटना के लिए दो कार्य की जरूरत है, मैं इस का उपयोग कर रहा कोशिश .toggle

:

$('.triggerlist').toggle(function(e) { 
     e.preventDefault(); 
    $(this).find('ul').fadeIn(); 
    },function() { 
    $(this).find('ul').fadeOut(); 
    }); 

कौन सा मुझे सिर्फ .click से कम 2 कार्यों पर और अधिक उत्पाद करने की अनुमति देता इसके 1 समारोह के साथ।