Steps for creating a retractable `<ul>` list on click away

Question

Steps for creating a retractable `<ul>` list on click away

I have successfully implemented a <ul> drop-down list, but I am interested in making the list "retract" or disappear back to its original state when clicking away from it. Is this possible?

Check out this FIDDLE

The code snippet below is what I currently have for the drop-down functionality. Since I'm not proficient in JavaScript, I'm unsure of how to achieve the desired retracting effect.

$(function(){
    $('#select').click(function(){
        $('#sel-option').show();        
    });
    $('#sel-option a').click(function(e){
         $('#select').text($(this).text());
         $('#sel-option').hide(); 
        $(this).addClass('current');
        e.preventDefault();
    })
})

javascript jquery html css

Answer 1

Answer №1

Indeed, all you need to do is handle the body click event and prevent the select click from bubbling up (otherwise, it won't open).

$(function(){
    $('#select').click(function(event){
        $('#sel-option').show();
        event.stopPropagation();
    });
    $('#sel-option a').click(function(e){
         $('#select').text($(this).text());
         $('#sel-option').hide(); 
        $(this).addClass('current');
        e.preventDefault();
    })
    $('body').on('click', function(){
        $('#sel-option').hide(); 
    });
})

UPDATED: Check out this updated and functional fiddle: http://jsfiddle.net/Tpf7E/239/

Answer 2

Indeed, all you need to do is handle the body click event and prevent the select click from bubbling up (otherwise, it won't open).

$(function(){
    $('#select').click(function(event){
        $('#sel-option').show();
        event.stopPropagation();
    });
    $('#sel-option a').click(function(e){
         $('#select').text($(this).text());
         $('#sel-option').hide(); 
        $(this).addClass('current');
        e.preventDefault();
    })
    $('body').on('click', function(){
        $('#sel-option').hide(); 
    });
})

UPDATED: Check out this updated and functional fiddle: http://jsfiddle.net/Tpf7E/239/

Answer 3

Answer №2

give this a shot

$(function(){

    $(document).click(function (e)
  {
    var container = $(".language");

    if (!container.is(e.target) // if the click's target is not the container...
        && container.has(e.target).length === 0) // ... nor one of its children
    {
        $('#sel-option').hide();        
             show = 0;
    }
});

    var show=0;

    $('#select').click(function(){
        if(show==0){
         $('#sel-option').show();        
         show = 1;
        } else {
             $('#sel-option').hide();        
             show = 0;
        }    
    });
    $('#sel-option a').click(function(e){
         $('#select').text($(this).text());
         $('#sel-option').hide(); 
        $(this).addClass('current');
        e.preventDefault();
    });
});

check out FIDDLE

Answer 4

give this a shot

$(function(){

    $(document).click(function (e)
  {
    var container = $(".language");

    if (!container.is(e.target) // if the click's target is not the container...
        && container.has(e.target).length === 0) // ... nor one of its children
    {
        $('#sel-option').hide();        
             show = 0;
    }
});

    var show=0;

    $('#select').click(function(){
        if(show==0){
         $('#sel-option').show();        
         show = 1;
        } else {
             $('#sel-option').hide();        
             show = 0;
        }    
    });
    $('#sel-option a').click(function(e){
         $('#select').text($(this).text());
         $('#sel-option').hide(); 
        $(this).addClass('current');
        e.preventDefault();
    });
});

check out FIDDLE

Steps for creating a retractable `<ul>` list on click away

Answer №1

Answer №2

Similar questions

The synchronization of sessions between Socket.IO and Express is proving to be a challenge as

The navigation links will remain visible even when the unordered list is set to 0% opacity

I need assistance finding and selecting multiple checkboxes on the HTML page. Can someone help me locate them?

Resolving Issues in HTML and the Dynamic Duo of PHP and MySQL

unable to decrease the dimensions of the image within the next/image component

The background of an HTML button does not appear in IE8

Having trouble with PHP form not functioning correctly?

Instructions for connecting a button and an input field

Wordpress Custom Post Type with a Sleek Slider Plugin

Displaying minute scale from right to left using jQuery technology

Set tab navigation widget with a fixed height

I am having trouble getting event handlers to work with a group of buttons in JavaScript

Utilizing ng-if in AngularJS for displaying JSON data

Struggling to transfer information between POST and GET requests in Node/Express

Set up two unique production servers with different environment variables in NextJs

My website, powered by Wordpress, is currently experiencing an issue with excessive whitespace being added to the bottom of the contact form 7 plugin. I am perplexed as to the cause of this issue and

Media publications do not conform to the current trends

In PHP, a boolean variable will not display on the webpage when echoed

Switch ng-model in Angular to something different

Swapping out the default JavaScript random number generator for my custom JSON-based solution