【发布时间】：2018-07-14 19:39:01
【问题描述】：
如何添加 2 个并排的按钮？我的问题是它们在 2 个不同的 div 中。我正在尝试将浮动放在 btn 组中，但是当我这样做时，如果我想查看隐藏的第二个 div 并且动画不一样，则下拉菜单不起作用。我该如何解决这个问题？我想将添加和查看按钮添加到彼此旁边。
演示
window.onload = function() {
document.getElementById('hucontainer').style.display = 'none';
};
$('#divNewNotificationsRole-admin li').on('click', function() {
$('#role-admin').html($(this).find('a').html());
});
// View dropdown
// If the first dropdown element is selected, hide the second element and the dropdown list
$('#role').click(function(e){
e.preventDefault(); // Select dropdown element without reloading the page
var hu=document.getElementById("hucontainer");
var dropdowns = document.getElementsByClassName("dropdown-menu");
hu.style.display='none';
$("#rolecontainer").show("slow", function(){
});
dropdowns.style.display='none';
});
$('#relation').click(function(e){
e.preventDefault();
var role=document.getElementById("rolecontainer");
var dropdowns = document.getElementsByClassName("dropdown-menu");
$("#hucontainer").show("slow", function(){
});
role.style.display='none';
dropdowns.style.display='none';
});<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div align="right" class="dropdown">
<button class="btn btn-primary dropdown-toggle btn-md" type="button" data-toggle="dropdown"><i class="fa fa-user"></i> Admin
<span class="caret"></span>
</button>
<div class="dropdown-menu">
<li><a class="dropdown-item" href="#logout" data-toggle="modal">Logout <i class="fa fa-sign-out"></i></a></li>
<li><a class="dropdown-item" href="#changepass" data-toggle="modal">Change Pass <i class="fa fa-undo"></i></a></li>
</div>
</div>
<div class="btn-group" id="divNewNotificationsRole-admin">
<button id="role-admin" type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
View</button>
<div id="myDropdown" class="dropdown-menu">
<li><a id="role" class="dropdown-item" href="#">First Div</a></li>
<li><a id="relation" class="dropdown-item" href="#">Second Div</a></li>
</div>
</div>
</div>
<br/>
<div id="rolecontainer" class="container">
<div class="table">
<div align="right">
<button type="button" name="add" id="add" data-toggle="modal" data-target="#add_data_Modal" class="btn btn-warning">Add <li class="fa fa-plus"></li></button>
</div>
<h4><b>First Div</b></h4><br/>
<div id="role_table">
<table id="szerep_data" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<td align="center" width="65%"><b>Data</b></td>
<td align="center" width="35%"><b>View</b></td>
</tr>
</thead>
<tbody>
<tr>
<td>Data1</td>
<td><button class="btn btn-info">View</button></td>
</tr>
<tr>
<td>Data2</td>
<td><button class="btn btn-info">View</button></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- Second dropdown element -->
<div id="hucontainer" class="container">
<div class="col-sm-7">
<div align="right">
<button type="button" name="add" id="addHu_button" class="btn btn-warning">Add <i class="fa fa-plus"></i></button>
</div>
<h4><b>Second Div</b></h4>
<br/>
<div id="hu_table">
<table id="order_data" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<td align="center"><b>Data</b></td>
<td align="center"><b>View</b></td>
</tr>
</thead>
<tbody>
<tr>
<td>Data1</td>
<td><button class="btn btn-info">View</button></td>
</tr>
<tr>
<td>Data2</td>
<td><button class="btn btn-info">View</button></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>【问题讨论】：
标签： javascript jquery html css