Question

修正：

所以我得到了这个javascript，当浏览器足够小时会显示一个下拉菜单（用@media完成）。菜单是根据更大屏幕尺寸的菜单自动创建的。现在我的问题是它还创建了“Something1”和“Something2”的链接。

我希望这些显示但禁用，因此无法点击。

FIX：唯一需要添加的东西是它没有将“Something1 / 2”链接到非现有页面：

<a href="javascript:void(0)"></a>

HTML

<div class="nav">
    <nav>
        <ul>
            <li><a href="#" data-liquidslider-ref="main-slider">Actual Link</a>

            </li>
            <li> <a href="javascript:void(0)">Something1</a>

                <ul>
                    <li><a href="#" data-liquidslider-ref="main-slider">Actual Link</a>

                    </li>
                    <li><a href="#" data-liquidslider-ref="main-slider">Actual Link</a>

                    </li>
                </ul>
                <li><a href="javascript:void(0)">Something2</a>

                    <ul>
                        <li><a href="#" data-liquidslider-ref="main-slider">Actual Link</a>

                        </li>
                        <li><a href="#" data-liquidslider-ref="main-slider">Actual Link</a>

                        </li>
                        <li><a href="#" data-liquidslider-ref="main-slider">Actual Link</a>

                        </li>
                        <li><a href="#" data-liquidslider-ref="main-slider">Actual Link</a>

                        </li>
                    </ul>
                </li>
                <li><a href="#contact" data-liquidslider-ref="main-slider">Actual Link</a>

                </li>
        </ul>
    </nav>
</div>

JS

// Create the dropdown base
$("<select />").appendTo("nav");

// Create default option "Go to..."
$("<option />", {
    "selected": "selected",
        "value": "",
        "text": "Go to..."
}).appendTo("nav select");

// Populate dropdown with menu items
$("nav a").each(function () {
    var el = $(this);
    $("<option />", {
        "value": el.attr("href"),
            "text": el.text()
    }).appendTo("nav select");
});

$("nav select").change(function () {
    window.location = $(this).find("option:selected").val();
});

有没有办法实现这个目标？

Answer 1

创建空白链接的最简单方法如下：

<a href="#"></a>

或

<a href="javascript:void(0)"></a>

我不确定哪个是最佳选择，但我最近开始使用第二个选项。当您使用第一个选项时，它会将#符号添加到您网址的末尾，这会占用有效的导航链接。

禁用自动创建的下拉菜单js中的链接

1 个答案: