我试图让我的网站的菜单栏更适合移动设备.. 我目前已经拥有它所以它会缩小到一个点击打开的下拉菜单，显示我到其他页面的链接..
我发现的第一个问题是我的菜单比屏幕尺寸长，我无法滚动显示剩下的内容，所以我环顾四周，现在已经解决了问题，但创建了另一个..
发生的事情是，我可以正常打开菜单，选择项目并按预期在菜单内滚动..但是当我再次单击菜单按钮时，再次隐藏菜单，链接“拉出”视线＆＃39;但它在节目中留下菜单的背景..
@media (max-width: 767px) {
.scroll-to-top {
display: none;
}
.show-menu {
display: block !important;
visibility: visible !important;
position: fixed;
width: 100%;
height: 300px;
z-index: 999;
overflow-y: scroll;
-webkit-transform: translate3d(0,0,0);
-webkit-overflow-scrolling: touch;
}}
我无法使可滚动菜单工作但最后，我发现添加了＆＃34; height：xx;＆＃34;部分解决了这个问题..
我不是很了解所有这些内容，而是尝试从编辑现有示例等方面学习。
任何人都能看到明显的东西吗？
（与之前相同的菜单。）
昨晚我发现这已添加到我的网站：
@media (min-width: 768px) {.dropdown-menu li:hover .menu {visibility: visible;}}
@media (min-width: 768px) {.dropdown:hover .dropdown-menu {display: block;}}
我相信这会让我的菜单点击显示，当您在移动设备上查看网站时，它们通常会被徘徊。
我想添加另一个相反的声明，所以如果您点击打开的菜单，它会再次关闭..
（相同菜单）
我在我的网站上使用的主题构建方式，使第3级菜单项显示为第2级链接下方的项目符号列表..
我想改变这一点，所以第三级链接也不会显示为列表，而是有自己的菜单也会退出..
echo '
<div id="menu">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<div class="container">
<div class="row">
<ul class="nav navbar-nav">';
foreach ($context['menu_buttons'] as $act => $button)
{
echo '
<li id="button_', $act, '" class="', $button['active_button'] ? 'active ' : '', '', !empty($button['sub_buttons']) ? 'dropdown' : '', '">
<a ', !empty($button['sub_buttons']) ? 'class="dropdown-toggle"' : '', ' href="', $button['href'], '"', isset($button['target']) ? ' target="' . $button['target'] . '"' : '', '>
', !empty($modSettings['smi_enable']) ? '<img style="vertical-align: middle;" src="'. $settings['default_images_url']. '/smi/'. $act. '.png" alt="'. $button['title']. '" title="'. $button['title']. '"/> ' : '', '', $button['title'], '', !empty($button['sub_buttons']) ? ' <span class="caret"></span>' : '' ,'
</a>';
if (!empty($button['sub_buttons']))
{
echo '
<ul class="dropdown-menu" role="menu">';
foreach ($button['sub_buttons'] as $childact => $childbutton)
{
echo '
<li>
<a href="', $childbutton['href'], '"', isset($childbutton['target']) ? ' target="' . $childbutton['target'] . '"' : '', '>
<span', isset($childbutton['is_last']) ? ' class="last"' : '', '>', !empty($modSettings['smi_enable']) ? '<img style="vertical-align: middle;" src="'. $settings['default_images_url']. '/smi/'. $childact. '.png" alt="'. $childbutton['title']. '" title="'. $childbutton['title']. '"/> ' : '', '', $childbutton['title'], !empty($childbutton['sub_buttons']) ? '...' : '', '</span>
</a>';
// 3rd level menus :)
if (!empty($childbutton['sub_buttons']))
{
echo '
<ul>';
foreach ($childbutton['sub_buttons'] as $grandchildbutton)
echo '
<li>
<a href="', $grandchildbutton['href'], '"', isset($grandchildbutton['target']) ? ' target="' . $grandchildbutton['target'] . '"' : '', '>
<span', isset($grandchildbutton['is_last']) ? ' class="last"' : '', '>', $grandchildbutton['title'], '</span>
</a>
</li>';
echo '
</ul>';
}
echo '
</li>';
}
echo '
</ul>';
}
echo '
</li>';
}
echo '
</ul>
</div>
</div>
</div>
</div>';
}
就像我之前提到的那样，我对这些内容并不太了解，但我相信上面的代码会构建菜单..
任何帮助表示感谢，如果需要，我可以提供更多代码块/链接！ ：）
非常感谢！
答案 0 :(得分：0)
<强> 2 您需要在脚本标记下添加此jquery代码：
if(screen.width<=768){
$('.dropdown').on('click',function(){
$('.dropdown-menu').toggle();
});
}
您应该删除刚刚在问题中发布的样式。
第3： 这是它的代码：
echo '
<div id="menu">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<div class="container">
<div class="row">
<ul class="nav navbar-nav">';
foreach ($context['menu_buttons'] as $act => $button)
{
echo '
<li id="button_', $act, '" class="', $button['active_button'] ? 'active ' : '', '', !empty($button['sub_buttons']) ? 'dropdown' : '', '">
<a ', !empty($button['sub_buttons']) ? 'class="dropdown-toggle"' : '', ' href="', $button['href'], '"', isset($button['target']) ? ' target="' . $button['target'] . '"' : '', '>
', !empty($modSettings['smi_enable']) ? '<img style="vertical-align: middle;" src="'. $settings['default_images_url']. '/smi/'. $act. '.png" alt="'. $button['title']. '" title="'. $button['title']. '"/> ' : '', '', $button['title'], '', !empty($button['sub_buttons']) ? ' <span class="caret"></span>' : '' ,'
</a>';
if (!empty($button['sub_buttons']))
{
echo '
<ul class="dropdown-menu" role="menu">';
foreach ($button['sub_buttons'] as $childact => $childbutton)
{
echo '
<li>
<a ', !empty($childbutton['sub_buttons']) ? 'class="dropdown-toggle1"' : '',' href="#"', isset($childbutton['target']) ? ' target="' . $childbutton['target'] . '"' : '', '>
<span', isset($childbutton['is_last']) ? ' class="last"' : '', '>', !empty($modSettings['smi_enable']) ? '<img style="vertical-align: middle;" src="'. $settings['default_images_url']. '/smi/'. $childact. '.png" alt="'. $childbutton['title']. '" title="'. $childbutton['title']. '"/> ' : '', '', $childbutton['title'], !empty($childbutton['sub_buttons']) ? '...' : '', '</span>
</a>';
// 3rd level menus :)
if (!empty($childbutton['sub_buttons']))
{
echo '
<ul class="dropdown-menu1" role="menu" style="display:none;position:relative;border:none;box-shadow:none;">';
foreach ($childbutton['sub_buttons'] as $grandchildbutton)
echo '
<li>
<a href="', $grandchildbutton['href'], '"', isset($grandchildbutton['target']) ? ' target="' . $grandchildbutton['target'] . '"' : '', '>
<span', isset($grandchildbutton['is_last']) ? ' class="last"' : '', '>', $grandchildbutton['title'], '</span>
</a>
</li>';
echo '
</ul>';
}
echo '
</li>';
}
echo '
</ul>';
}
echo '
</li>';
}
echo '
</ul>
</div>
</div>
</div>
</div>';
你也应该添加这个jquery代码（比如 2 ）：
$('.dropdown-toggle1').on('click',function(){
$('.dropdown-menu1').toggle();
});
注意：我在这些列表项中使用了click事件，因此我应该使锚点href =“＃”。如果你想让它们在悬停时出现，你应该像第二个问题一样使用CSS。