Question

给定：带导航元素的简单标题。
时间：用户将鼠标悬停在标题导航元素上并显示迷你弹出窗口
然后：用户必须单击元素才能显示弹出

下面的代码适用于悬停，但我希望迷你弹出窗口在点击时显示而不是悬停。当我改变.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上查看。

希望它有所帮助，欢呼声。

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

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

1 个答案: