wordpress Bootstrap 菜单在悬停时加载，希望它仅在点击时加载和卸载

Question

我的网站 poltr.com 出现菜单错误

重现错误： - 访问 poltr.com - 将窗口大小调整为移动大小（以便引导菜单折叠显示汉堡面包（按钮）） - 点击汉堡包（按钮）。 - 点击“地块” - 当试图点击“Kategorier”、“Landsdel”或“Byer”时没有任何反应。 （如果你在手机上尝试一下，你会更好地理解它）。

我希望子菜单像窗口为桌面大小时那样向下折叠。此外，我希望在单击子菜单中的链接时加载子页面。

如果我给出了正确的代码，请使用检查元素方法。

.nav > li {
    position: relative;
    display: block;
}
.container > .navbar-header, .container-fluid > .navbar-header, .container > .navbar-collapse, .container-fluid > .navbar-collapse {
    margin-right: -15px;
    margin-left: -15px;
}
.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
    border-color: #101010;
}

<li id="menu-item-3379" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-3379 dropdown"><a title="Kategorier" href="#" data-toggle="dropdown" class="dropdown-toggle">Kategorier <span class="caret"></span></a>
<ul role="menu" class=" dropdown-menu">
	<li id="menu-item-5317" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-5317"><a title="Nyheder" href="http://poltr.com/nyheder/">Nyheder</a></li>
	<li id="menu-item-3381" class="menu-item menu-item-type-taxonomy menu-item-object-kategori menu-item-3381"><a title="Action" href="http://poltr.com/action">Action</a></li>
	<li id="menu-item-3382" class="menu-item menu-item-type-taxonomy menu-item-object-kategori menu-item-3382"><a title="Adrenalin" href="http://poltr.com/adrenalin">Adrenalin</a></li>
	<li id="menu-item-3387" class="menu-item menu-item-type-taxonomy menu-item-object-kategori menu-item-3387"><a title="Cd indspilning &amp; Musik" href="http://poltr.com/cd-indspilning-og-musik">Cd indspilning &amp; Musik</a></li>
	<li id="menu-item-3383" class="menu-item menu-item-type-taxonomy menu-item-object-kategori menu-item-3383"><a title="Dans" href="http://poltr.com/dans">Dans</a></li>
	<li id="menu-item-3384" class="menu-item menu-item-type-taxonomy menu-item-object-kategori menu-item-3384"><a title="Det Kreative" href="http://poltr.com/det-kreative">Det Kreative</a></li>
	<li id="menu-item-3385" class="menu-item menu-item-type-taxonomy menu-item-object-kategori menu-item-3385"><a title="Det Sjove" href="http://poltr.com/det-sjove">Det Sjove</a></li>
	<li id="menu-item-3390" class="menu-item menu-item-type-taxonomy menu-item-object-kategori menu-item-3390"><a title="Gøgl &amp; Sport" href="http://poltr.com/goegl-og-sport">Gøgl &amp; Sport</a></li>
	<li id="menu-item-3386" class="menu-item menu-item-type-taxonomy menu-item-object-kategori menu-item-3386"><a title="Kostumer" href="http://poltr.com/kostumer">Kostumer</a></li>
	<li id="menu-item-3388" class="menu-item menu-item-type-taxonomy menu-item-object-kategori menu-item-3388"><a title="Smag &amp; Drinks" href="http://poltr.com/smag-og-drinks">Smag &amp; Drinks</a></li>
	<li id="menu-item-3389" class="menu-item menu-item-type-taxonomy menu-item-object-kategori menu-item-3389"><a title="Specialiteter" href="http://poltr.com/specialiteter">Specialiteter</a></li>
	<li id="menu-item-3391" class="menu-item menu-item-type-taxonomy menu-item-object-kategori menu-item-3391"><a title="Til Vands" href="http://poltr.com/til-vands">Til Vands</a></li>
	<li id="menu-item-3392" class="menu-item menu-item-type-taxonomy menu-item-object-kategori menu-item-3392"><a title="Transport" href="http://poltr.com/transport">Transport</a></li>
	<li id="menu-item-3393" class="menu-item menu-item-type-taxonomy menu-item-object-kategori menu-item-3393"><a title="Udlejning" href="http://poltr.com/udlejning">Udlejning</a></li>
	<li id="menu-item-3394" class="menu-item menu-item-type-taxonomy menu-item-object-kategori menu-item-3394"><a title="Wellness" href="http://poltr.com/wellness">Wellness</a></li>
</ul>
</li>

Answer 1

在您的http://poltr.com/wp-content/themes/polterabend/library/js/scripts.js 您有一个切换子菜单显示的功能：

/* if is above or equal to 768px */
if (responsive_viewport >= 768) {

  $('.menu-item-has-children').hover(function() {
    $(this).css('background-color', '#0f7d6b');
    $(this).find('.dropdown-menu').css('display', 'block');
  }, function() {
    $(this).css('background-color', '#129d86');
    $(this).find('.dropdown-menu').css('display', 'none');
  });
}

正如您在 display:block 或 display:none 中看到的那样，它仅适用于超过 768 像素的屏幕宽度 - 似乎没有控制较小屏幕宽度的脚本，因此您需要添加它。如果它在某个地方，您可以将此功能更改为类似这样的功能，以便在点击时工作，而不是在悬停时工作：

$('.menu-item-has-children').click(function() {
  $(this).css('background-color', '#0f7d6b');
  $(this).find('.dropdown-menu').css('display', 'block');
});

// This code may be different but you can change it to work for you - this is the core idea
$("html").on('click touchstart', function(e){
  // close menu when clicking outside
  if( !$(e.target).parents('ul').hasClass('dropdown-menu') ){
    $(this).parents('.menu-item-has-children').css('background-color', '#129d86');
    $(this).parents('.dropdown-menu').css('display', 'none');
  }
});

更清楚一点：用第二个代码块替换第一个代码块

更新

好的，这里有一个更好的解决方案：

你需要添加这个css：

.menu-item-has-children.dropdown-active {
  background-color: #0f7d6b;  
}

.menu-item-has-children.dropdown-active .dropdown-menu{
  display: none;
}

然后用js切换类：

/* if is above or equal to 768px */
if (responsive_viewport >= 768) {

  $('.menu-item-has-children').hover(function() {
    $(this).addClass('dropdown-active');
  }, function() {
    $(this).removeClass('dropdown-active');
  });
} else {
  $('.menu-item-has-children').click(function(e) {
    e.preventDefault();
    $(this).toggleClass('dropdown-active');
  });
}

所以现在，你需要添加 css，删除我之前建议的代码并将所有这些代码 http://prntscr.com/9mbpe9 替换为上面的代码