使用外部控制显示下拉菜单

如何在按下相邻按钮时显示引导下拉菜单？使用外部控制显示下拉菜单

我已经试过的每个组合：

$('#branchToggle').trigger('click.bs.dropdown').dropdown('toggle'); 
$('#branchToggle').parent().addClass('open') 
$('#branchToggle').next().show()

但我无法得到它的工作。

我的HTML是：

<div class="btn-group"> 
       <button id="activeBranchFilterBtn" type="button" class="btn btn-default btn-sm btn-149">Branch</button> 
       <button id="branchToggle" type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown"> 
        <span class="caret"></span> 
        <span class="sr-only">Toggle Dropdown</span> 
       </button> 
       <ul id="branchFilter" class="dropdown-menu" role="menu"> 
        <?PHP foreach ($branchList as $branchData) { ?> 
         <li data-branch-id="<?PHP echo $branchData->id;?>" data-branch-name="<?PHP echo $branchData->name;?>"><a href="#"><?PHP echo $branchData->name;?></a></li> 
        <?PHP } ?> 
       </ul> 
      </div>

为了澄清，我想如果按下“分公司”的按钮，列表显示，就像它想如果我点击了正常的触发按钮。

来源

2014-06-19 imperium2335

是[this]（http://jsfiddle.net/L7JBz/）（http://jsfiddle.net/L7JBz/）你在找什么？这是bootstrap的默认功能，只需在'jquery.js'之后包含'bootstrap.js'。如果这不是你想要的，我可能无法理解你的问题。 – Fr0zenFyr

@ Fr0zenFyr嗨，没有。当我点击分支按钮时，列表不显示。 – imperium2335

如果你想下拉只在“科”按钮，点击打开，这样做

$('#activeBranchFilterBtn').on("click", function(){ 
        $('ul.dropdown-menu').toggle(); 
       });

JSFIDDLE

如果你想获得下拉时点击任何地方的完全块（任一按钮）上，这样做

$('.btn-group').on("click", function(){ 
        $('ul.dropdown-menu').toggle(); 
       });

JSFIDDLE

我想第二个是你需要的。

UPDATE：class="open"将您.btn-group当下拉触发器从按钮给出data-toggle="dropdown"属性进行切换。只需将此属性添加到第一个按钮（分支），您将可以轻松前往。检查this fiddle。希望这可以帮助。

来源

2014-06-19 07:39:15 Fr0zenFyr

有没有更好的方法来关闭它，而不必创建一个文档点击监听器？我发现'open'类通常会附加到btn-group，但由于某些原因，当我单击分支按钮时，它不会应用此类。 – imperium2335

不清楚...你的意思是你不想再次点击关闭下拉菜单？ – Fr0zenFyr

我不确定你的意思是“更好的方式来关闭它，而不必创建文档点击监听器”。我想我让你担忧了。由于您没有给它赋予data-toggle =“dropdown”属性，所以'class =“open”'没有被添加到父div上。尝试[更新的小提琴]（http://jsfiddle.net/L7JBz/3/）。 – Fr0zenFyr

使用外部控制显示下拉菜单

回答

相关问题