html - 如何管理下拉列表作为移动设备的链接

Question

你好， 我遇到了一些问题。在标题的购物车链接中，我使用了下拉菜单，但是当我将媒体大小更改为响应式(移动)时，它应该是简单的超链接，但它可以作为下拉菜单使用。这根据 Bootstrap 标记工作.

所以谁能告诉我如何更改标记，以便在桌面媒体大小下它可以作为下拉菜单使用，而在移动设备上它应该像链接一样

此处作为整个标题链接的标记

<div class="row">
        <div class="col-md-12">
            <ul class="nav navbar-nav navbar-right">
                @Html.Widget("header_links_before")
                @Html.Action("AdminHeaderLinks", "Common")
                @*<li>
                        @Html.Action("TaxTypeSelector", "Common")
                    </li>
                    <li>
                        @Html.Action("CurrencySelector", "Common")
                    </li>
                    <li>
                        @Html.Action("LanguageSelector", "Common")
                    </li>*@
                @if (Model.IsAuthenticated)
                {
                    <li><a href="@Url.RouteUrl("CustomerInfo")" class="account">@Model.CustomerEmailUsername</a></li>
                    <li><a href="@Url.RouteUrl("Logout")" class="ico-logout">@T("Account.Logout")</a></li>
                }
                else
                {
                    <li><a href="@Url.RouteUrl("Register")" class="ico-register">@T("Account.Register")</a></li>
                    <li><a href="@Url.RouteUrl("Login")" class="ico-login">@T("Account.Login")</a></li>
                }
                @if (Model.AllowPrivateMessages)
                {
                    <li>
                        <a href="@Url.RouteUrl("PrivateMessages", new { tab = "" })" class="ico-inbox">@T("PrivateMessages.Inbox")<span>@Model.UnreadPrivateMessages</span></a>
                    </li>
                    if (!string.IsNullOrEmpty(Model.AlertMessage))
                    {
                        <script type="text/javascript">
                            $(document).ready(function () {
                                displayPopupNotification('@Html.Raw(HttpUtility.JavaScriptStringEncode(Model.AlertMessage))', 'success', false);
                            });
                        </script>
                    }
                }
                @if (Model.ShoppingCartEnabled)
                {
                    <li id="topcartlink" class="dropdown">
                        <a href="@Url.RouteUrl("ShoppingCart")" class="ico-cart dropdown-toggle" data-toggle="dropdown">
                            <span class="cart-label">@T("ShoppingCart")</span>
                            <span class="cart-qty">@T("ShoppingCart.HeaderQuantity", Model.ShoppingCartItems)</span>
                            <span class="caret"></span>
                        </a>

                            <ul class="dropdown-menu" role="menu">
                                @Html.Action("FlyoutShoppingCart", "ShoppingCart")
                            </ul>
                    </li>
                }
                @if (Model.WishlistEnabled)
                {
                    <li>enter code here
                        <a href="@Url.RouteUrl("Wishlist")" class="ico-wishlist">`enter code here`
                            <span class="cart-label">@T("Wishlist")</span>
                            <span class="wishlist-qty">@T("Wishlist.HeaderQuantity", Model.WishlistItems)</span>
                        </a>
                    </li>
                }
                @Html.Widget("header_links_after")
            </ul>
        </div>
    </div>

请检查下面的图片链接

http://imageupper.com/i/?S0200010090013K14096405471629783 http://imageupper.com/i/?S0200010090023K14096405471629783tw

Answer 1

试试这个:

$('.dropdown-toggle').click(function(e) {
e.preventDefault();
setTimeout($.proxy(function() {
if ('ontouchstart' in document.documentElement) {
  $(this).siblings('.dropdown-backdrop').off().remove();
}
}, this), 0);
});