헤더 탐색 플라이 아웃 메뉴에서 호버로 변경

Question

• 주어진 : 탐색 요소가있는 간단한 헤더.
• 때 : 사용자가 헤더 탐색 요소를 가리킬 미니 플라이 아웃은 다음
• 나타납니다 : 사용자는 표시 할 요소를 클릭해야합니다 플라이 아웃

아래의 코드 가져가 위대한 작품 있지만, 나는 미니 플라이 아웃이 호버 대신 클릭으로 나타나기를 바랍니다. .click으로 이동하면 아무 일도 일어나지 않습니다.

아이디어가 있으십니까? 온

.hover(handlerIn, handlerOut) 

:

JQuery와

jQuery(document).ready(function() { 
function displayFlyout(main_id, content_id) { 
    jQuery(main_id).hover(function() { 
      jQuery(content_id).stop(true, true).slideDown('fast'); 
      jQuery(this).addClass("fly-dropdown"); 
     }, 
     function() { 
      jQuery(content_id).stop(true, true).slideUp(200); 
      jQuery(this).removeClass("fly-dropdown"); 
     } 
    ); 
} 

displayFlyout("#example_one", "#example_one_content"); 
displayFlyout("#example_two", "#example_two_content"); 
displayFlyout("#example_three", "#example_three_content"); 
}); 

html로 (플라이 아웃의 한 예)

<ul class="header_flyout col-md-10 pull-right"> 
     <li class="contact_us"> 
      <div id="example_one" class="no-dropdown"> 
       <span class="menu"><?php echo $this->__('Example'); ?></span> 
       <div class="header-dropdown-content" id="example_one_content"> 
        <span class="blue-arrow">&nbsp;</span> 
        <?php echo $this->getChildHtml('contact_mini'); ?> 
       </div> 
      </div> 
     </li> 
     <li>.....</li> (example two) 
     <li>.....</li> (example three) 
    </ul> 

Answer 1

문제는이 .hover() 방법은, 두 개의 매개 변수, from the docs을 받아 인 다른 손은 .click() 기능 만 허용합니다. 당신이 무엇을 할 수 있는지 하나 개의 매개 변수는 문서에 click 이벤트를 수신하고이 목표를 명중하면 당신은 너무 좋아, 그렇지 않으면 당신은 드롭 다운을 숨길 것, 드롭 다운을 활성화하려면 : 당신은 또한 수

jQuery(document).ready(function() { 
    function displayFlyout(main_id, content_id) { 
    jQuery(document).click(function (ev) {  
     if (jQuery(ev.target).parent(main_id).is(jQuery(main_id))) { 
     jQuery(content_id).stop(true, true).slideDown('fast'); 
     jQuery(this).addClass("fly-dropdown");  
     } else { 
     jQuery(content_id).stop(true, true).slideUp(200); 
     jQuery(this).removeClass("fly-dropdown"); 
     } 
    }); 
    } 

    displayFlyout("#example_one", "#example_one_content"); 
}); 

이 jsFiddle에서 확인하십시오.

호프가 도움이 되었으면 좋겠다. 건배.

편집 :가 는 클릭의 목표는 당신이 결합하려는 된 요소를 찾기 위해 DOM을 통과하는 .parent() 기능을 사용하는 이유 년대 <span class="menu">Example</span> 될 것 속에는이 솔루션을 사용하여 마음 taht를하십시오.