Question

这可能是一个愚蠢的问题，但我似乎无法找到解决方案。

我正在创建一个移动友好的网站，我正在使用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();
    }
);

我希望我有道理。如果还有其他我可能忘记添加的内容，请告诉我。

Answer 1

您可以使用bootstrap的responsive utilities来显示/隐藏某些元素

如果你使用下拉菜单，你可能应该使用bootstrap methods来手动显示/隐藏它们

Answer 2

由于您正在使用引导程序，因此您可以轻松使用其中一个响应式帮助程序类，因此在您的情况下：

<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">

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

2 个答案: