如何根据jQuery中的表格行按钮位置打开UL？

Question

I have a table right now there are three rows with Add Section button (it may be increase). When i click on Add Section a UL is toggle, its working fine just for first row Add Section , when i click on second button then UL open with top button. how can i fix it?

In simple way, i want open UL as per button position. how can i do this with single UL list?

My Code:-

 $(function(){ $('.add-section').click(function(){ $('.section-area').toggle(); }); })

 .section-area{ background:#fff; padding: 5px; border-radius: 4px; box-shadow: 2px 4px 10px rgba(39, 59, 69, 0.4); width: 100px; position: absolute; top:61px; right:140px; display: none;}

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> <table class="table table-bordered"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> <th>Action</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>john@example.com</td> <td><button class="add-section btn btn-primary">Add Section</button></td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>mary@example.com</td> <td><button class="add-section btn btn-primary">Add Section</button></td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>july@example.com</td> <td><button class="add-section btn btn-primary">Add Section</button></td> </tr> </tbody> </table> <div class="section-area"> <ul> <li>Add 1</li> <li>Add 2</li> <li>Add 3</li> </ul> </div>

Answer will be appreciated!

Answer 1

Your problem occurs because the top and right of your section-area are fixed. To fix that, simply change it so that the top and right change in accordance to which button is clicked. Here is a working example:

 $(function(){ $('.add-section').click(function(){ let buttonTopPosition = $(this).offset().top let buttonLeftPosition = $(this).offset().left let sectionAreaWidth = $(this).outerWidth() $('.section-area').toggle(); $('.section-area').css({top: buttonTopPosition, left: buttonLeftPosition - sectionAreaWidth}) }); })

 .section-area{ background:#fff; padding: 5px; border-radius: 4px; box-shadow: 2px 4px 10px rgba(39, 59, 69, 0.4); width: 100px; position: absolute; top: 0; left: 0; display: none;}

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> <table class="table table-bordered"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> <th>Action</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>john@example.com</td> <td><button class="add-section btn btn-primary">Add Section</button></td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>mary@example.com</td> <td><button class="add-section btn btn-primary">Add Section</button></td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>july@example.com</td> <td><button class="add-section btn btn-primary">Add Section</button></td> </tr> </tbody> </table> <div class="section-area"> <ul> <li>Add 1</li> <li>Add 2</li> <li>Add 3</li> </ul> </div>

I changed your CSS top and left to be initially 0 . Then, I will update those properties when a button is clicked (updated using jQuery).

Answer 2

I advise you to use the bootstrap dropdown for so many reasons:

1. your code is not well maintained for ex. when you click on the second row you if the dropdown is already opened you have to click two times.
2. there no indication that this is a drop down.
3. styles are not well prepared.

You don't need to reinvent the wheel you are using the bootstrap so try to use it as much as you can.

Check the snippet:

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> <table class="table table-bordered"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> <th>Action</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>john@example.com</td> <td> <div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Add Section </button> <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> </div> </div> </td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>mary@example.com</td> <td> <div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Add Section </button> <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> </div> </div> </td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>july@example.com</td> <td> <div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Add Section </button> <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> </div> </div> </td> </tr> </tbody> </table>