禁用自動創建的下拉菜單js中的鏈接

Question

固定：

因此，當瀏覽器足夠小時（用一些@media完成），我得到了一段JavaScript，它將顯示一個下拉菜單。 菜單是基於菜單自動創建的，用於更大的屏幕尺寸。 現在，我的問題是，它還會從“ Something1”和“ Something2”創建鏈接。

我希望這些顯示但禁用，因此不可單擊。

JSFiddle

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>

我不確定哪個是最佳選擇，但最近我開始使用第二個選擇。 當您使用第一個選項時，它將在您的網址末尾添加#符號，這可能會破壞活動的導航鏈接。