Bootstrap 子菜单不折叠答案

【问题标题】：Bootstrap submenu does not collapseBootstrap 子菜单不折叠
【发布时间】：2017-05-09 08:07:03
【问题描述】：

朋友们，

我有以下基于引导程序的菜单，由于某种原因不会崩溃。菜单由 WordPress 生成，我使用的是引导程序。可能是什么原因造成的，解决方法是什么？

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-29" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-29 dropdown"><a title="Therapieën" href="#" data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">Therapieën <span class="caret"></span></a>
  <ul role="menu" class=" dropdown-menu">
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-86" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-86"><a title="Logopedie" href="http://localhost:81/wordpress/logopedie/">Logopedie</a></li>
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-85" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-85"><a title="Bijlessen" href="http://localhost:81/wordpress/bijlessen/">Bijlessen</a></li>
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-84" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-84"><a title="Audiologie" href="http://localhost:81/wordpress/audiologie/">Audiologie</a></li>
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-83" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-83"><a title="Stemtherapie" href="http://localhost:81/wordpress/stemtherapie/">Stemtherapie</a></li>
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-82" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-82"><a title="Verder ook begeleiding in" href="http://localhost:81/wordpress/verder-ook-begeleiding-in/">Verder ook begeleiding in</a></li>
  </ul>
</li>

【问题讨论】：

你能不能创建一个 bootply 以便我们看到代码工作？
任何控制台错误？
你在引导工作吗？
你有 jquery 吗？
制作 jsfiddle/plunker

标签： jquery css wordpress twitter-bootstrap

【解决方案1】：

它不起作用，因为代码不完整。试试这个：

<div class="dropdown">
<li>
<a href="#" data-toggle="dropdown">Therapieën <span class="caret"></span></a>
<ul class="dropdown-menu">
    <li ><a href="http://localhost:81/wordpress/logopedie/">Logopedie</a></li>
    <li><a href="http://localhost:81/wordpress/bijlessen/">Bijlessen</a></li>
    <li><a href="http://localhost:81/wordpress/audiologie/">Audiologie</a></li>
  </ul>
</li>

</div>

注意<div> 的dropdown 类，<a> 的data-toggle 和<dropdown-menu>。他们必须在同一级别的标签中遵循特定的顺序。例如，您不能将class="dropdown" 放在<li> 中

【讨论】：

【解决方案2】：

这是工作代码

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
  <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-29" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-29 dropdown"><a title="Therapieën" href="#" data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">Therapieën <span class="caret"></span></a>
  <ul role="menu" class=" dropdown-menu">
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-86" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-86"><a title="Logopedie" href="http://localhost:81/wordpress/logopedie/">Logopedie</a></li>
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-85" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-85"><a title="Bijlessen" href="http://localhost:81/wordpress/bijlessen/">Bijlessen</a></li>
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-84" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-84"><a title="Audiologie" href="http://localhost:81/wordpress/audiologie/">Audiologie</a></li>
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-83" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-83"><a title="Stemtherapie" href="http://localhost:81/wordpress/stemtherapie/">Stemtherapie</a></li>
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-82" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-82"><a title="Verder ook begeleiding in" href="http://localhost:81/wordpress/verder-ook-begeleiding-in/">Verder ook begeleiding in</a></li>
  </ul>
</li>


</body>
</html>

【讨论】：