Post
Ask Question

Create Interactive Dropdown Menus While Click Text Open Dropdown

Introduction

Creating a dropdown menu involves structuring your HTML with a trigger element, typically a button or link, and a hidden <ul> list containing <li> items for menu options. CSS styles dictate the dropdown's appearance, initially hiding it (display: none) and positioning it relative or absolute. jQuery facilitates interactivity by toggling the dropdown's visibility (slideToggle()) when the trigger is clicked and hiding it (slideUp()) when clicks occur outside the dropdown. This approach ensures a user-friendly interface where users can easily navigate options without cluttering the UI, enhancing usability on web pages.

Code

<table id="example" class="display" style="width:100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="dropdown-toggle">Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011-04-25</td>
            <td>$320,800</td>
        </tr>
    </tbody>
</table>

<div id="dropdown-content" class="dropdown-content">
    <select id="dropdown-list">
        <option value="option1">Option 1</option>
        <option value="option2">Option 2</option>
        <option value="option3">Option 3</option>
    </select>
</div>

<script>
    $(document).ready(function() {
        $('#example tbody').on('click', '.dropdown-toggle', function() {
            alert("sdfs");

            $('#dropdown-content').css({
                top: $(this).offset().top + $(this).outerHeight(),
                left: $(this).offset().left
            }).toggle();
        });

        $(document).on('click', function(event) {
            if (!$(event.target).closest('.dropdown-toggle').length && !$(event.target).closest('.dropdown-content').length) {
                $('#dropdown-content').hide();
            }
        });

        $('#dropdown-content').on('click', function(event) {
            event.stopPropagation();
        });
    });
</script>

Explanation

  1. Document Ready Function: $(document).ready(function() {...}); ensures that the JavaScript code executes only after the HTML document has been completely loaded.
  2. Dropdown Toggle Event
    • $('#example tbody').on('click', '.dropdown-toggle', function () {...});
      • This attaches a click event handler to any element with the class .dropdown-toggle that is within the <tbody> of the table with an ID example.
      • When clicked, it positions and toggles the visibility of #dropdown-content below the clicked cell ($(this) refers to the clicked element).
  3. Click Outside Event Handler
    • $(document).on('click', function(event) {...});
      • This event listener checks if the click is outside both .dropdown-toggle and .dropdown-content.
      • If so, it hides #dropdown-content.
  4. Stop Propagation
    • $('#dropdown-content').on('click', function(event) {...});
      • Prevents the click event from bubbling up to the document level, ensuring that clicking inside #dropdown-content does not trigger the document's click event handler meant for hiding it.

Conclusion

The dropdown menu (#dropdown-content) that appears below a specific cell (Tiger Nixon) in a table (#example) when clicked. It also ensures that clicking outside the dropdown hides it, and clicking inside the dropdown does not trigger the hiding functionality. This setup is commonly used for creating custom dropdowns or context menus in web applications.


Similar Articles