0
這可能是一個愚蠢的問題，但我似乎無法找到解決方案。根據屏幕尺寸創建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();
}
);
我希望我是有道理的。如果有什麼我可能忘記添加的，請讓我知道。