响应式菜单 - 带链接的父菜单

时间:2014-11-25 08:02:02

标签: javascript jquery html css menu

我可能有一个要求,我必须将父菜单链接到链接而不是显示子菜单。现在我正在使用光滑菜单http://slicknav.com/

逻辑上不应链接父菜单,因为它应该在移动设备上显示子菜单。而桌面版本我们可以通过悬停效果来反击这个可以显示子菜单并单击父菜单也可以打开链接,但在小屏幕上我们可以打开链接或显示子菜单。

我现在的问题是,在小提琴示例(http://jsfiddle.net/y1dLdd1f/1/)中我将Parent 1 meny链接到google.com,但脚本阻止了这一点。如何解锁它,当用户点击它时,如果父菜单有正确的链接,则打开页面而不是显示子菜单

<ul id="menu">
    <li><a href="http://www.google.com">Parent 1</a>
        <ul>
            <li><a href="#">item 3</a></li>
            <li>Parent 3
                <ul>
                    <li><a href="#">item 8</a></li>
                    <li><a href="#">item 9</a></li>
                    <li><a href="#">item 10</a></li>
                </ul>
            </li>
            <li><a href="#">item 4</a></li>
        </ul>
    </li>
    <li><a href="#">item 1</a></li>
    <li>non-link item</li>
    <li>Parent 2
        <ul>
            <li><a href="#">item 5</a></li>
            <li><a href="#">item 6</a></li>
            <li><a href="#">item 7</a></li>
        </ul>
    </li>
</ul>

1 个答案:

答案 0 :(得分:2)

光滑菜单有许多可用选项,包括“allowParentLinks”,你需要的只是......,

$(document).ready(function(){
    $('#menu').slicknav({
        allowParentLinks:"true"
    });
});

但为了证明这在JSFiddle中工作,你需要将target =“_ blank”添加到你&lt; a&gt;标签