javascript - 如何将两个位于不同 div 中的按钮添加到彼此？

Question

如何添加 2 个彼此相邻的按钮？我的问题是它们在 2 个不同的 div 中。我试图将 float 放在 btn-group 中，但是当我这样做时，如果我想看到隐藏的第二个 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>

Answer 1

你可以添加一些样式来改变按钮的位置:

#add{
  display: inline-block;
  position: absolute;
  top: 33px;
  left: 85px;
}

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';
});

#add{
  display: inline-block;
  position: absolute;
  top: 33px;
  left: 85px;
}

<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>