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

Question

固定:

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

我希望这些显示但禁用，所以不可点击。

修复:唯一必须添加的东西是它不会将“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>

我不确定哪个是最佳选择，但我最近开始使用第二个选项。当您使用第一个选项时，它会将 # 符号添加到您的 url 的末尾，这可能会弄乱事件的导航链接。