Tapping elsewhere on the screen will not result in the select box closing

I'm currently troubleshooting an issue with the site filter feature. When the btn-select is open and I click outside the panel, the select remains open. I am looking to create an event that will detect when the dropdown is closed so that I can close the btn-select as well.


            <div class="dropdown pull-right" id="site-filter">
                <a class="dropdown-toggle filter-label" data-toggle="dropdown" href="#">
                    Site Filter <i class="fa fa-filter"></i>
                </a>
                <div class="dropdown-menu">
                    <div class="panel panel-primary">
                        <div class="panel-heading">
                            <h4>Site Filter</h4>
                        </div>
                        <div class="panel-body">
                            <form role="form">
                                <div class="input-group input-daterange" style="">
                                    <input type="text" class="input form-control" placeholder="Start Date">
                                    <span class="input-group-addon">to</span>
                                    <input type="text" class="input form-control" placeholder="End Date">
                                </div>
            
                                <a class="btn btn-select">
                                    <input type="hidden" class="btn-select-input" id="" name="" value="" />
                                    <span class="btn-select-value">Organization</span>
                                    <span class='btn-select-arrow glyphicon glyphicon-chevron-down'></span>
                                    <ul>
                                        <li>Comapny Name</li>
                                    </ul>
                                </a>

                                ... (additional buttons and dropdowns)

                                <hr />
                                <button type="reset" class="btn btn-primary btn-outline">Reset</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <script>
                $(document).ready(function () {
                    $(document).on('click', '.btn-select', function (e) {
                        e.preventDefault();
                        var ul = $(this).find("ul");
                        if ($(this).hasClass("active")) {
                            if (ul.find("li").is(e.target)) {
                                var target = $(e.target);
                                target.addClass("selected").siblings().removeClass("selected");
                                var value = target.html();
                                $(this).find(".btn-select-input").val(value);
                                $(this).find(".btn-select-value").html(value);
                            }
                            ul.hide();
                            $(this).removeClass("active");
                        }
                        else {
                            $('.btn-select').not(this).each(function () {
                                $(this).removeClass("active").find("ul").hide();
                            });
                            ul.slideDown(300);
                            $(this).addClass("active");
                        }
                    });
                });
            </script>
        
    

Answer №1

Resolved

$("#site-filter").click(function () {
        var selected = $(this).find(".active");
        console.log(selected);

        $(selected).each(function () {
            selected.removeClass(".active");
            selected.find("ul").hide();
        });
    });

solved the problem

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Troubleshooting the issue with UI-Router AngularJS controller not functioning properly in a

Trying to grasp the ins and outs of UI-Router in conjunction with Angular has proven to be quite challenging for me. In my setup, there's an index: <body> <div ui-view></div> <!--Location of file holding app--> <scri ...

Remove bulleted list from HTML using JavaScript DOM

My task involved deleting the entire "agent" array using the removeChild() function, requiring the id of a <ul> element. However, I faced an issue as I couldn't set the id for the "ul" due to using the createElement() function. //old code < ...

What are the best methods for detecting devices in order to create customized CSS styles for iPad and Galaxy Tab?

Ensuring my web application is compatible with various devices is crucial. While I have created a common CSS for all mobile and tablet devices, it seems to be causing some problems specifically on the iPad. After finding a fix tailored for the iPad, I now ...

Capturing the process exit event in Express: A guide

process.on('exit', async () => { console.log('updating') await campaignHelper.setIsStartedAsFalse() console.log('exit') process.exit(1) }) This code snippet is designed to trigger an update in the database before t ...

Issues with the .change(function() JavaScript in Internet Explorer versions less than 9

I'm experiencing issues with this script in Internet Explorer versions below 9. Can someone please help me identify what is wrong with my script? Thank you. IE7 and IE8 are showing the following error: SCRIPT87: Invalid argument. Found ...

The dropdown feature appears to be malfunctioning in my ReactJS Bootstrap project

I'm currently working with reactJS and Bootstrap. I am attempting to display a user image with a dropdown menu, where the dropdown will open when the user clicks on it. Unfortunately, my dropdown is not functioning as expected. Below is the code sni ...

I seem to be stuck in an endless loop within React and can't find a way to break free

Currently, I am utilizing the useState() function along with an array errors[] as part of the state and a function setError() to pass the useState() function to child elements for calling purposes: const [errors, setErrors] = useState([]); //-------------- ...

What causes performance issues when utilizing mouseover events in JQuery?

var mouseX; var mouseY; $(document).mousemove( function(e) { mouseX = e.pageX; mouseY = e.pageY; }); $(".test").mouseover(function(){ $('#DivToShow').css({'top':mouseY,'left':mouseX, 'display':'block&ap ...

Is there a way to specifically style my jquery datepicker widget without affecting other elements on the page?

I have customized my main page using a tab-style widget and a specific stylesheet. Recently, I realized the need for a datepicker in my application. To accommodate this, I included the jquery-ui-style.cs stylesheet to my project. The challenge now is that ...

After retrieving a value from attr(), the object does not have the 'split' method available

I need to implement the split method on a variable fetched using attr. This is the code snippet I am attempting: $(document).ready(function() { $('.some_divs').each(function() { var id = $(this).attr('id'); var ida = ...

Update ng-Bootstrap ToDate field by removing the date when selecting a fromDate

Is there a way to clear the date from the toDate input field while selecting a date from the fromDate input field in ng-bootstrap? <form class="row row-cols-sm-auto" *ngIf="showDateRangeImp"> <div class="col-12" ...

Is it possible to retrieve Firebase values, but not able to access them?

I'm facing an unusual issue where pushing a value to a Firebase object leads to two unexpected outcomes: I am unable to retrieve it from the array when pulling the object from Firebase. The array I receive does not have a length property. Let' ...

Using Ajax to preview images results in displaying a broken image icon

I am currently working on implementing an image preview function using Ajax. As I was experimenting, a couple of questions came to my mind: Once the Ajax has been executed, is the actual image uploaded to the server or just an array containing strings l ...

Utilize AngularFire to generate a new User and invoke the factory function to showcase notifications

I recently started working with AngularJS and wanted to integrate it with AngularFire/Firebase for storing project data. I created a factory that manages notifications to be displayed in a centralized location. Here is the structure of my factory: myApp.f ...

After a period of time, NodeJS abruptly crashes while processing a CSV file

Recently, I've been working on a project that involves converting CSV data into XML. To accomplish this, I have been using the fs.createReadStream() method to read the CSV file. However, I encountered an issue where the terminal crashes unexpectedly a ...

Is the script proceeding without waiting for the AJAX response?

I've got this lengthy jQuery function that involves a jQuery AJAX call, some CSS modifications, and repositioning a div. Check out the code snippet below: $('.editable').click(function(e) { // Assign attributes for the AJAX call ...

Keep updating information dynamically using Ajax

I've set up a page featuring Bootstrap cards that fetch information from a MySQL database. What I'm Looking For I want these cards to refresh every 3 seconds without the need for page reload. I believe Ajax is the solution for this task as it a ...

Modify a website link using Javascript by detecting two separate button clicks

I am seeking a way to dynamically change the src attribute of different images on a house depending on which button has been clicked. There are two groups of buttons: The types of house parts, such as windows, doors, garage, soffits, and gutters. The col ...

Challenges faced when using jQuery UI autocomplete

My code utilizes jQuery UI's autocomplete method on a text box: $(function() { $('#project').autocomplete({ source: function(request, response){response(Object.getOwnPropertyNames(projects))}, minLength: 0, ...

Is there a way to ensure that the code only runs if the promise has been successfully fulfilled

In my NodeJS project, I am leveraging promises to ensure that the server stops running if certain functions do not meet the required conditions. Currently, the server halts as intended, but I also want to include a console log message when the promises are ...