Question

我知道在SO上已经多次询问过，但是我尝试过的所有答案都没有奏效。

我想在Bootstrap 3.1.1和Shopify上构建一个主题的Mega菜单。

菜单已经到位，但我无法让菜单崩溃！它只是在页面加载时停止打开。

它完全适用于Bootply

但是，在我的staging server（Shopify）上，它没有正确启动。（PW：int ncurses_test() { initscr(); start_color(); init_pair(1, COLOR_GREEN, COLOR_BLACK); init_pair(2, COLOR_GREEN, COLOR_BLACK); init_pair(3, COLOR_BLACK, COLOR_BLUE); init_pair(4, COLOR_BLACK, COLOR_WHITE); noecho(); WINDOW *win = newwin(10, 10, 10, 10); wbkgd(stdscr, COLOR_PAIR(3)); wbkgd(win, COLOR_PAIR(4)); refresh(); wrefresh(win); raw(); int c; attron(COLOR_PAIR(1)); printw("Write something [ESC to escape]: "); while((c=getch())!=27) { move(10,0); attron(COLOR_PAIR(1)); printw("Keycode: %d, and the chracter: %c",c,c); move(0,0); attron(COLOR_PAIR(1)); printw("Write something [ESC to escape]: "); refresh(); } endwin(); return 0; }）

部首：

lukeskywalker

标记：

{{ 'bootstrap.css' | asset_url | stylesheet_tag }}
{{ 'style.css' | asset_url | stylesheet_tag }}

Answer 1

在style.css文件的CSS代码中，您有：

.main-header ul, li {
  display: inline-block;
}

这会覆盖.mega-dropdown-menu display:none;，因为dropdown-menu这就是您的菜单始终显示的原因。

不幸的是，即使我改变了你的菜单似乎没有用。我注意到在bootply示例中，当您单击打开菜单时，DOM将使用“打开”（显示在before类旁边）类以及after和finfo伪进行更新也会添加在你的网站上似乎没有发生的事情。

Answer 2

@crazymatt是正确的，该风格导致您的导航在桌面视图中保持打开状态，但仅此一项并未修复移动设备中的打开菜单。

如果您将以下样式添加到移动断点，移动菜单也会起作用。

.in .dropdown-menu {
   display: block;
}

我还注意到，在你的实时环境中，你正在调用jQuery和bootstrap库两次。我不相信它会导致这个导航问题，但删除这些重复项是个好主意。标题中有一个实例，页脚中有另一个实例（由shopify加载）。

Navbar Collapse JQuery没有触发 - Bootstrap 3.1.1

2 个答案: