将悬停更改为单击标题导航弹出菜单

Question

• Given：带有导航元素的简单标题。
• 何时：用户将鼠标悬停在标题导航元素上并出现一个迷你浮出控件
• 然后：用户必须单击元素才能显示浮出控件

下面的代码非常适合悬停，但我希望在单击而不是悬停时出现迷你弹出窗口。当我将 .hover 更改为 .click 时，没有任何反应。

有什么想法吗？

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：

.hover( handlerIn, handlerOut )

另一方面，.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 上查看。

希望对你有帮助， 干杯。

编辑： 请记住，使用此解决方案意味着点击的目标将是 <span class="menu">Example</span>，这就是我使用 .parent() 函数向上遍历 dom 的原因找到您要绑定的元素。