2014-09-02 110 views
3

嗨, 我面临一些问题。在购物车链接在标题我使用下拉菜单,但是当我将媒体大小更改为响应(移动),所以它应该是简单的超链接,但它可以作为下拉式使用。这根据引导标记起作用。如何管理下拉链接到移动设备

因此,谁能告诉我如何更改标记,以便在桌面媒体大小将作品下拉和移动设备应该是这样的链接

这里标记为整个头部链接

<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

回答

0

试试这个:

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

另外,你可以在这里找到另一个解决方案:http://www.jeffmould.com/2014/01/09/responsive-multi-level-bootstrap-menu/ – Milo 2014-09-24 16:19:04