根据屏幕尺寸创建2个不同的链接

问题描述：

这可能是一个愚蠢的问题，但我似乎无法找到解决方案。根据屏幕尺寸创建2个不同的链接

我创建的网站也是移动设备友好的，我使用bootstrap和laravel。

它有一个菜单，有一个名为“产品”的下拉菜单。如果将鼠标悬停在上面，则会显示下拉菜单，并且“产品”菜单将可点击，并将您带到包含所有产品类别的页面。

为了让我能够使用悬停，我从下拉列表中删除了data-toggle="dropdown"，并在我的js文件中创建了悬停功能。 data-toggle="dropdown"允许我点击“产品”而不必转到产品页面。

现在我遇到的问题是，当我去手机，我按“产品”，我去产品页面，而不是下拉菜单显示。

我正在考虑做这样的事情，或者通过jquery将data-toggle="dropdown"添加到链接，具体取决于窗口大小。

@if(window = 700px) 
    <a href="{!! url(getSeoLink($grandfather->id)) !!}" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> 
@else 
    <a href="{!! url(getSeoLink($grandfather->id)) !!}" class="dropdown-toggle" role="button" aria-haspopup="true" aria-expanded="false"> 
@endif

显然这不起作用，所以我想知道我将如何做到这一点。我在网上看过，我什么也没有遇到。关于jquery的问题，我不知道当窗口达到700px标记时我该如何添加data-toggle="dropdown"。

我的菜单

<nav class="navbar navbar-default main_menu_wrapper"> 
    <div class="container-fluid"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main_menu" aria-expanded="false"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <a href="{!! url('/') !!}" class="navbar-brand"> 
       <img src="{!! asset("img/logo.jpg") !!}"> 
      </a> 
     </div> 

     <div class="collapse navbar-collapse menu_wrapper" id="main_menu"> 
      <form action="{!! route('search') !!}" method="POST" role="search" class="navbar-form navbar-right search"> 
       {{ csrf_field() }} 
       <div class="form-group"> 
        <input type="text" class="form-control" name="search" placeholder="Search..."> 
       </div> 
       <button type="submit" class="btn btn-default"> 
        <span class="glyphicon glyphicon-search"></span> 
       </button> 
      </form> 

      <ul class="nav navbar-nav navbar-right"> 
       @foreach($menus_child as $grandfather) 
        @if($grandfather->menu_id) 
         <li> 
        @elseif($grandfather->title == 'Home') 
         <li class="parent {!! menu_active($grandfather->id) !!}"> 
        @elseif(count($grandfather->menusP()->where('menu_id', '>', 0)->get())) 
         <li class="dropdown {!! menu_active($grandfather->id) !!}"> 
        @else 
         <li class="parent {!! menu_active($grandfather->id) !!}"> 
        @endif 

        @if(count($grandfather->menusP()->where('menu_id', '>', 0)->get())) 
         <a href="{!! url(getSeoLink($grandfather->id)) !!}" class="dropdown-toggle" role="button" aria-haspopup="true" aria-expanded="false"> 
          {!! $grandfather->title !!} <span class="caret"></span> 
         </a> 
        @else 
         {!! Html::link(getSeoLink($grandfather->id), $grandfather->title) !!} 
        @endif 

        @if(count($grandfather->menusP)) 
         <ul class="dropdown-menu"> 
          @foreach($grandfather->menusP as $father) 
           @if($father->menu_id) 
            <li class="parent_child"> 
           @else 
            <li> 
           @endif 

           {!! Html::link(getSeoLink($father->id), $father->title) !!} 
          @endforeach 
         </ul> 
        @endif 
       @endforeach 
      </ul> 
     </div> 
    </div> 
</nav>

我的JS，允许悬停

$('ul.navbar-nav li').hover(
    function() { 
     $(this).find('> ul').show(); 
    }, 
    function() { 
     $(this).find('> ul').hide(); 
    } 
);

我希望我是有道理的。如果有什么我可能忘记添加的，请让我知道。

答

由于您使用的引导，你可以很容易地使用他们的一个响应帮手类，所以在你的情况下：

<a href="{!! url(getSeoLink($grandfather->id)) !!}" class="visible-xs dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> 

<a href="{!! url(getSeoLink($grandfather->id)) !!}" class="hidden-xs dropdown-toggle" role="button" aria-haspopup="true" aria-expanded="false">

答

您可以使用自举的responsive utilities显示/隐藏一些元素

也如果使用下拉菜单，你应该使用引导methods显示/隐藏他们manualy

根据屏幕尺寸创建2个不同的链接

相关推荐