CSS 호버 메뉴를 jQuery 메뉴로 변환

creating the menu found in gmail with css dropdown에 대한 블로그 게시물을 찾았습니다.CSS 호버 메뉴를 jQuery 메뉴로 변환

우리가 버튼 위에 마우스를 올려하지만 우리는 버튼이 아니라 마우스 오버를 클릭하면 드롭 다운이 표시되는 jQuery를 메뉴

이를 변환 할 때 드롭 다운 메뉴가 표시됩니다 도와주세요.

미리 감사드립니다.

http://jsfiddle.net/PSUkW/

출처

2011-11-01 Shobha V

안녕하세요. 코드를 작성할 때 특정 문제가 발생하면 도움을 드리지만 대부분 (경우에 따라) 작성하지 않을 것입니다. –

변환 방법을 알고 싶습니까? jQuery를 잘 사용하지 않아서 예제 코드가 도움이 될 수 있습니다. –

http://www.jquery.com은 유용한 예제로 가득합니다. –

정말 간단한 논리입니다. 나는 .clicked 클래스로 :hover CSS 규칙의 일부를 대체하고이 JS 추가 :

$('.menu > ul > li').click(function() { 
    $(this).siblings().removeClass('clicked'); 
    $(this).toggleClass('clicked'); 
});

대신 :hover 의사 클래스와 드롭 다운을 트리거 브라우저를 허용하는, 내가 jQuery를 각각의 상단에있는 클래스 .clicked를 전환해야 -vel li이 클릭되었습니다. 이것은 JS와 동일한 동작을하지만, 발생합니다.

이 라인 :

$(this).siblings().removeClass('clicked');

는 기본적으로 사용자가 시간 (달리 중복이 발생)에 하나의 드롭 다운 메뉴를 할 수 있다는 요소의 형제로부터 clicked 클래스를 제거한다.

데모 : 아주 간단하게 http://jsfiddle.net/PSUkW/5/

출처

2011-11-01 13:24:36 Blender

당신은 당신의 코멘트를 삭제했다. 그러나 다음은 업데이트 된 코드이다 : http://jsfiddle.net/PSUkW/16/. – Blender

많은 도움을 주셔서 감사합니다. (조언을 구하는 것이 내 일이라고 생각하는 말을 삭제했습니다.) –

문제 없습니다. jQuery는 배우기가 어렵지 않습니다. 일단 그렇게하면 쉽게 작업 할 수 있습니다. – Blender

. 스타일을 추가하고 li : hover의 드롭 다운을 표시하는 CSS 내부에서이를 업데이트하여 클래스를 추가 할 수 있습니다 (예 : .menu ul li.click ul). 그런 다음 두 줄의 jQuery가 클릭 동작을 타겟팅합니다.

여기에 코드를 참조하십시오. http://jsfiddle.net/PSUkW/3/

출처

2011-11-01 13:24:48 motoxer4533

@Shobha V -이 링크보기 : http://jsfiddle.net/PSUkW/9/ 클릭 클래스의 모든 인스턴스를 제거하도록 코드를 업데이트 한 다음 클릭 한 특정 LI에서 '클릭'클래스를 추가합니다. 드롭 다운이있는 경우 드롭 다운을 활성화하는 클래스입니다. – motoxer4533

CSS 호버 메뉴를 jQuery 메뉴로 변환

답변

관련 문제