我有一系列Bootstrap下拉功能，显示每个洲，美国各州等国家的列表。它们看起来像这样：
<nav class="dropdown Canada" style="margin-top: 5px;">
<button class="btn dropdown-toggle" type="button" id="dropdownCanada" data-toggle="dropdown" aria-expanded="true" style="width: 100%; background: #f00; color: #fff;"> <b>Canada</b> </button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownCanada">
<?php
echo join( $Provinces, '' );
?>
</ul>
</nav>
<nav class="dropdown States" style="margin-top: 5px;">
<button class="btn dropdown-toggle" type="button" id="dropdownStates" data-toggle="dropdown" aria-expanded="true" style="width: 100%; color: #fff;"> <b>United States</b> </button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownStates">
<?php
echo join( $States, '' );
?>
</ul>
</nav>
他们工作正常，但我想将所有国家/地区列表放在一个下拉列表中，所有州，省等的列表都在另一个下拉列表中。因此，当您单击标有“国家/地区”的按钮时，它会显示标有“北美”，“非洲”等的按钮。然后，用户将单击“北美”以查看北美所有国家/地区的列表。
但是，当我将所有下拉按钮放在类似的下拉按钮中时，它只能在中途工作。当我点击“国家/地区”时，它会显示一个按钮列表，但是当我点击其中一个按钮时没有任何反应。
有人能告诉我如何正确地做到这一点吗？或者这是用Bootstrap无法完成的事情？如果有更好的方法，那对我有用。 ;）