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

Changing hover to click for header navigation flyout menus

本文关键字：导航 菜单 标题 单击 悬停      更新时间：2023-09-26
  • Given：一个带有导航元素的简单标题
  • 何时：用户将鼠标悬停在页眉导航元素上，并出现一个小型弹出按钮
  • 然后：用户必须单击图元才能显示弹出按钮

下面的代码非常适合悬停，但我希望迷你弹出按钮在单击时显示，而不是悬停。当我更改时。将鼠标悬停到。单击时，不会发生任何事情。

有什么想法吗？

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>

问题是.hover()方法接受来自文档的两个参数：

.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上查看它。

希望能有所帮助，干杯

EDIT:请记住，使用此解决方案意味着单击的目标将是<span class="menu">Example</span>，这就是为什么我使用.parent()函数遍历dom以找到要绑定的元素

相关文章：