Làm thế nào để có menu thả xuống để mở/đóng khi nhấp chuột thay vì di chuột?

Question

Tôi rất mới với javascript và ajax/jquery và đã cố gắng để có được một kịch bản để mở và đóng menu thả trên nhấp chuột thay vì di chuột.

Menu được đề cập được tìm thấy trên http://www.gamefriction.com/Coded/ và là menu tối ở bên phải bên dưới tiêu đề. Tôi muốn nó mở và đóng như trình đơn khác bên dưới nó (nó có màu xám nhạt và nằm trong mô-đun "Chọn phân chia").

Trình đơn màu xám là một phần của trình đơn và menu ngôn ngữ thì không.

Tôi cũng có thể nhập jquery có thể tìm thấy trong nguồn chế độ xem của liên kết ở trên.

My Javascript Code:

<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> 

CSS của tôi:

#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 của tôi:

<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> 

Cảm ơn!

Answer 1

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

Sử dụng chuyển đổi sẽ yêu cầu bạn phải bấm vào để mở sau đó reclick để đóng

Answer 2

tìm kiếm $("#lang-selector li").hover này và thay thế bằng

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

Answer 3

.hover, .click, .something, tất cả đều gây nên, xem liên kết này:

Jquery Events

để tìm hiểu thêm về các sự kiện trong Jquery !

Ps: bharwani Sushil (bỏ phiếu nó), là đúng, chỉ cần thay đổi .hover của bạn bằng các .click

Answer 4

tôi sẽ làm một cái gì đó như thế này ...

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

Và, sau đó, trong CSS thêm này:

.active { display: block; } 

< < EDIT: Removed "ul" từ lớp ".active" cho hiệu quả CSS render >>

Cũng đảm bảo rằng các tiểu nav <ul> có "display: none;" theo mặc định trong CSS của bạn.

Điều này sẽ làm cho nó để nhấp vào một <li> thẻ trong # lang-selector, nhưng không phải trong bất kỳ phụ nav <ul> thẻ hoặc sẽ mở hoặc đóng sub-nav, tùy thuộc vào đó là tình trạng hiện thời.

Nếu bạn đang lo lắng về khả năng tiếp cận của việc có "display: none" trên sub-nav theo mặc định, bạn có thể làm một cái gì đó như thế này ...

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

< < EDIT: selectors bị sửa đổi để so khớp ví dụ được cung cấp, chuyển "điều này" thành đối tượng jQuery. >>

Và sau đó cũng thêm video này vào CSS

.hidden { display: none; } 

Trong kịch bản này, bạn có <ul> hiển thị theo mặc định, sau đó khi tải tài liệu, jQuery thêm lớp "ẩn" để tất cả trong số họ để ẩn chúng, sau đó bấm vào các <li> nó sẽ chuyển đổi các lớp học ẩn và hoạt động, hiển thị chúng hoặc ẩn chúng.

Bạn cũng sẽ cần xóa "display: none" hiện tại khỏi # lang-selector ul ul trong CSS, nếu không nó sẽ được ưu tiên hơn các lớp ẩn/hoạt động.

Answer 5

nếu bạn cần hai chức năng cho một sự kiện nhấp chuột, hãy thử .toggle

Tôi đang sử dụng này:

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

nào cho phép tôi để làm công cụ thêm về 2 chức năng hơn chỉ là .click với hàm số 1 của nó.