0
これは愚かな質問かもしれませんが、解決策を見つけることができません。画面サイズに応じて2つの異なるリンクを作成する
モバイルフレンドリーなサイトを作成しています。私はブートストラップとlaravelを使用しています。
「製品」というドロップダウンメニューがあります。その上にカーソルを置くと、ドロップダウンが表示され、[商品]メニューがクリック可能になり、すべての商品カテゴリのページに移動します。
ホバーを使用できるようにするには、ドロップダウンリストからdata-toggle="dropdown"を削除し、jsファイルにホバー機能を作成しました。 data-toggle="dropdown"を使用すると、商品ページに移動することなく「商品」をクリックすることができます。
私はモバイルに行って「製品」を押すと、ドロップダウンの代わりに製品ページに行きます。
私はこのようなことをやっているとか、ウィンドウサイズによってはjquery経由でdata-toggle="dropdown"を追加することを考えていました。
明らかにこれは機能しませんので、どうすればそのようなことをすることができるかを知りたいと思います。私はネットを見て、何も出てこなかった。 jqueryのものに関しては、ウィンドウが700pxのマークに当たったときに、どのようにdata-toggle="dropdown"を追加するのか分かりません。
マイメニューホバー
$('ul.navbar-nav li').hover(
function() {
$(this).find('> ul').show();
},
function() {
$(this).find('> ul').hide();
}
);
私は意味を成していた希望を可能に
<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。私が追加したことを忘れてしまったかもしれないことが他にもあるなら、私に知らせてください。あなたがドロップダウンを使用している場合、あなたはおそらく、あなたが簡単にでき、ブートストラップを使用しているのでてmanualy