So öffnen Sie das Bootstrap-Dropdown-Menü programmgesteuert
Ich versuche, ein Bootstrap-Dropdown-Menü zu öffnen, wenn ich auf ein Element eines anderen Dropdown-Menüs klicke.
Die Idee ist, eine Stadt aus der ersten Dropdown-Liste auszuwählen - dann öffnet das Skript automatisch die zweite Dropdown-Liste mit Bereichen (und zeigt nur Bereiche an, die der ausgewählten Stadt entsprechen).
Hier ist mein JS:
$('#sidebar_filter_city li').click(function(){
$('#sidebar_filter_areas').dropdown('toggle');
});
und das ist der HTML:
<div class="dropdown form-control">
<div data-toggle="dropdown" id="sidebar_filter_cities" class="sidebar_filter_menu" data-value="jersey-city">Jersey City<span class="caret caret_sidebar"></span></div>
<input type="hidden" name="advanced_city" value="jersey-city">
<ul id="sidebar_filter_city" class="dropdown-menu filter_menu" role="menu" aria-labelledby="sidebar_filter_cities">
<li role="presentation" data-value="">All Cities</li>
<li role="presentation" data-value="jersey-city">Jersey City</li>
<li role="presentation" data-value="london">London</li>
<li role="presentation" data-value="new-york">New York</li>
</ul>
</div>
</div>
<div class="dropdown form-control">
<div data-toggle="dropdown" id="sidebar_filter_areas" class="sidebar_filter_menu">All Areas<span class="caret caret_sidebar"></span> </div>
<input type="hidden" name="advanced_area" value="">
<ul id="sidebar_filter_area" class="dropdown-menu filter_menu" role="menu" aria-labelledby="sidebar_filter_areas">
<li role="presentation" data-value="">All Areas</li>
<li role="presentation" data-value="east-harlem" data-parentcity="">East Harlem</li>
<li role="presentation" data-value="greenville" data-parentcity="">Greenville</li>
<li role="presentation" data-value="manhattan" data-parentcity="">Manhattan</li>
<li role="presentation" data-value="northern-brooklyn" data-parentcity="">Northern Brooklyn</li>
.....
</ul>
</div>
</div>