Question

我一直在使用Twitter Bootstrap开发一个解决方案，当您将鼠标悬停在桌面上时可以扩展主导航，但是当点击插入符号移动设备（托盘隐藏在桌面上）时，菜单会展开。此外，我希望顶级导航项可以在移动设备上点击。

我所取得的成就：

子菜单在悬停（桌面）上展开
可点击顶级导航（桌面和移动设备）
Caret隐藏在桌面上，但显示在移动设备上
插入符号的可点击区域扩展＆amp;坍塌（移动）

什么行不通：

顶级导航项目扩展整行（移动）
插入符号的展开/折叠区域位于第二行（请参阅屏幕截图中的“服务”下方的黑色栏 - 移动设备）

我想发生什么（见截图）：

红线右侧的可点击区域用于扩展/折叠菜单（移动）
红线左侧的可点击区域用于访问“服务”顶级导航页面（移动设备）

简而言之，桌面版正如我所希望的那样正常工作，但移动版本存在突出问题。当然，百分比不必与红线完美匹配，但我基本上喜欢在同一行上的两个点击事件;一个用于访问服务页面，另一个用于扩展服务子菜单。

这是我目前针对Twitter Bootstrap的HTML设置，其中包含我添加的唯一自定义CSS以及移动设备上当前视图的屏幕截图。为清晰起见选择了错误的配色方案。

<ul id="menu-mainnav" class="nav"><li><a href="http://localhost">Home</a></li>
    <li class="dropdown">
         <a href="http://localhost/services" data-hover="dropdown" data-target="#" class="dropdown-toggle pull-left js-activated disabled">Services</a>
         <a data-toggle="dropdown" data-target="#"><b class="caret pull-right hidden-desktop"></b></a>
         <ul class="dropdown-menu">
             <li><a href="http://localhost/services/service1">Service 2</a></li>
             <li><a href="http://localhost/services/service2">Service 1</a></li>
         </ul>
     </li>
 </ul>

CSS

@import url('bootstrap/css/bootstrap.css');
@import url('bootstrap/css/bootstrap-responsive.css');
body {
    padding-top: 60px;
    padding-bottom: 40px;
} 
.caret {border-top: 6px solid #fff; border-right: 6px solid transparent; border-left: 6px solid transparent;}
.dropdown .caret {margin-top: -20px;}

当前问题的屏幕截图

enter image description here

Answer 1

稍微玩了一下之后，这是我的解决方案，对我有用。

<ul id="menu-mainnav" class="nav"><li><a href="http://localhost">Home</a></li>
                <li class="dropdown">
                    <a href="http://localhost/services" data-hover="dropdown" data-target="#" class="dropdown-toggle pull-left js-activated disabled testdd">Services</a>
                    <b data-toggle="dropdown" data-target="#" class="caret pull-right hidden-desktop rh-caret" style="width:6px; float:right;background-position:50% -133px; height:6px;"></b>
                    <ul class="dropdown-menu">
                        <li><a href="http://localhost/services/service1">Service 2</a></li>
                        <li><a href="http://localhost/services/service2">Service 1</a></li>
                    </ul>
                </li>
            </ul>

制作导航菜单项目＆amp;插入符号（并在同一行）

1 个答案: