To close the menu, simply tap on anywhere on the screen

Question

To close the menu, simply tap on anywhere on the screen

Is there a way to modify a script so that it closes the menu when clicking on any part of the screen, not just on an 'li' element?

$(function() {
  $('.drop-down-input').click(function() {
  $('.drop-down-input.selected').removeClass('selected'); // Clear previous selection
  $(this).addClass('selected');
  $(this).find(".dropdown-list").show();
});

$(document).on("click", ".drop-down-input.selected li",
  function(e) {
    e.stopPropagation();
    $('.drop-down-input.selected .dropdown-list').hide().siblings().val($(this).html());
  });
});

This is my HTML code:

<div class="styled-input-container drop-down-input">
                       <input id="simple_2" class="drop-down-select" placeholder="input text" type="text">
                       <ul class="dropdown-list">
                           <li>eeee</li>
                           <li>xxxx</li>
                           <li>xxxx</li>
                           <li>xsssxxx</li>
                       </ul>
                   </div>

javascript jquery html css

Answer 1

Answer №1

Here's a functional solution that may be of assistance :)

$( document ).ready(function() {
    
    // Changing input color from grey to blue
    
    
  $(".styled-input-container input").focus(function () {
     $id = this.id;
     $idgen = '#' + $id;
     //console.log($idgen);
     
     $($idgen).closest( "div" ).addClass('focused');
    });
    
    $(".styled-input-container input").blur(function() {
        $('.styled-input-container').removeClass('focused');
        
    });
  
    // Opening and closing ul list input
    
   $(function() {
        $('.drop-down-input').click(function() {
            $('.drop-down-input.selected').removeClass('selected'); // Clear previous selection
            $(this).addClass('selected');
            $(this).find(".dropdown-list").show();
        });

        $(document).on("click", ".drop-down-input.selected li",
          function(e) {
            e.stopPropagation();
            $('.drop-down-input.selected .dropdown-list').hide().siblings().val($(this).html());
          });
    });

    $(document).mouseup(function (e){
        var container = $(".dropdown-list");

        if (!container.is(e.target)
            && container.has(e.target).length === 0)
        {
            container.hide();
        }
    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="styled-input-container">
    <input id="simple_1" placeholder="Enter text here" type="text">
                   
</div>
<div class="separator"></div>
<div class="styled-input-container drop-down-input">
    <input id="simple_2" class="drop-down-select" placeholder="Enter text here" type="text">
    <ul class="dropdown-list">
        <li>eeee</li>
        <li>xxxx</li>
        <li>yyyy</li>
        <li>zzzz</li>
    </ul>
</div>

Answer 2

Here's a functional solution that may be of assistance :)

$( document ).ready(function() {
    
    // Changing input color from grey to blue
    
    
  $(".styled-input-container input").focus(function () {
     $id = this.id;
     $idgen = '#' + $id;
     //console.log($idgen);
     
     $($idgen).closest( "div" ).addClass('focused');
    });
    
    $(".styled-input-container input").blur(function() {
        $('.styled-input-container').removeClass('focused');
        
    });
  
    // Opening and closing ul list input
    
   $(function() {
        $('.drop-down-input').click(function() {
            $('.drop-down-input.selected').removeClass('selected'); // Clear previous selection
            $(this).addClass('selected');
            $(this).find(".dropdown-list").show();
        });

        $(document).on("click", ".drop-down-input.selected li",
          function(e) {
            e.stopPropagation();
            $('.drop-down-input.selected .dropdown-list').hide().siblings().val($(this).html());
          });
    });

    $(document).mouseup(function (e){
        var container = $(".dropdown-list");

        if (!container.is(e.target)
            && container.has(e.target).length === 0)
        {
            container.hide();
        }
    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="styled-input-container">
    <input id="simple_1" placeholder="Enter text here" type="text">
                   
</div>
<div class="separator"></div>
<div class="styled-input-container drop-down-input">
    <input id="simple_2" class="drop-down-select" placeholder="Enter text here" type="text">
    <ul class="dropdown-list">
        <li>eeee</li>
        <li>xxxx</li>
        <li>yyyy</li>
        <li>zzzz</li>
    </ul>
</div>

Answer 3

Answer №2

To implement a listener on the entire DOM, simply use the following code:

$(document).on('click', ':not(.drop-down-input.selected li)',function() {/* Close all open menus  */});

This approach allows you to exclude certain elements, such as the li element, from being trigger by the click event using the :not selector.

Answer 4

To implement a listener on the entire DOM, simply use the following code:

$(document).on('click', ':not(.drop-down-input.selected li)',function() {/* Close all open menus  */});

This approach allows you to exclude certain elements, such as the li element, from being trigger by the click event using the :not selector.

To close the menu, simply tap on anywhere on the screen

Answer №1

Answer №2

Similar questions

jQuery Mobile: PHP dynamically loads content (forms) but styles do not apply

Stop users from skipping ahead in an HTML5 video

Controller encounters a error when requiring a module

Struggling to retrieve the JSON information, but encountering no success

Tips for displaying an image larger than its container using CSS or Bootstrap

Utilize PHP SVG images to trigger internal JavaScript code through the <img> tag

Checking the opacity with an if/else statement, then adding a class without removing the existing class

Tips for handling a JSON payload retrieved through a POST request

The overflow-anchor property is not effective for scrolling horizontally

Determining the precise location of the div element

Custom options titled MUI Palette - The property 'primary' is not found in the 'TypeBackground' type

Ensuring a div remains perfectly centered

What methods can I use to verify that the form data has been effectively stored in the database?

How can I ensure security measures are in place to avoid XSS attacks on user-generated HTML content?

Find the sum of values in an array of objects if they are identical

What is the procedure for invoking a function when the edit icon is clicked in an Angular application

When scrubbing through videos, Chrome consistently throws a MEDIA_ERR_DECODE error

Tips for setting up my ajax/views method to output a dictionary

jQuery mistakenly sends a GET request instead of a POST request

"Troubleshooting issues with Material Design components in AngularJS: Why is <md-select> not functioning correctly