Tips for automatically closing the Toggle Navigation feature in Vue JS when a user clicks outside of the navigation container

Is there a way to close the toggled navigation menu automatically when the user clicks outside of the navigation container? I have implemented two ul menus inside the navigation menu and would like the subNavActive, safNavAcitve, and repNavUl variables to be set to false when the user clicks outside of the Toggled Nav Container. new Vue({ el: '#app',

      data: {
        visible: false,
        home: true,
        show: false,
        active: false,
        subNavActive: false,
        safNavShow: false,
        repNavUl: false,
        admNavShow: false,
        rotateDropDown: false
      },
      methods: {}
    });

HTML CODE BELOW

 <div class="container">
                <!-- Main nav starts here  -->
                <!-- main nav vue transition below -->
                <transition name="slide-fade">
                    <!-- vue animation if/else below  -->
                    <nav class="main-nav" v-if="show">
                        <!-- Main nav header and title  -->
                        <div class="main-nav-header">
                            <h2>Hello User</h2>
                            <h3>Welcome Back</h3>
                        </div>
                        <div class="main-nav-container">
                            <!-- Main navigation ul list below  -->
                            <ul class="main-nav-ul">
                                <li>
                                    <li class="split-li">
                                        <span>
                                            <i class="fas fa-calendar-alt"></i>
                                        </span>
                                        MY SCHEDULE & BIDDING
                                        <a class="main-nav-spans" href="#">
                                            <i class="fas fa-angle-right"></i>
                                        </a>
                                    </li>
                                </li>

                                <li>
                                    <li class="split-li">
                                        <span>
                                            <i class="fas fa-handshake"></i>
                                        </span>
                                        SAFETY
                                        <a class="main-nav-spans" @click="safNavShow = !safNavShow" href="#">
                                            <i class="fas fa-angle-right"></i>
                                        </a>
                                    </li>
                                    <!-- Sub nav transition below -->
                                    <transition name="slide-right">
                                        <!-- vue animation if/else below  -->
                                        <div class="sub-nav saf-nav-toggle" v-if="safNavShow">
                                            <div class="sub-nav-header ">
                                                <h3>
                                                    <li class="split-li">
                                                        <span>
                                                            SAFETY
                                                        </span>

                                                        <a @click="safNavShow = !safNavShow" class="sub-nav-icons" href="#">
                                                            <i class="fas fa-times"></i>
                                                        </a>
                                                    </li>

                                                </h3>
                                            </div>
                                            <ul class="sub-nav-menu">
                                                <li>
                                                    <li class="split-li">
                                                        <span>
                                                            Reporting
                                                        </span>

                                                        <a @click="repNavUl =!repNavUl, rotateDropDown =!rotateDropDown" v-bind:class="{ rotateDropDown: rotateDropDown }" class="main-nav-spans"
                                                            href="#">
                                                            <i class="fas fa-angle-down"></i>
                                                        </a>
                                                    </li>


                                                    <transition name="rep-nav">
                                                        <ul class="sub-nav-ul" v-if="repNavUl">
                                                            <li>
                                                                <a href="#">I-21 Injury Reporting</a>
                                                            </li>
                                                            <li>
                                                                <a href="#">ASAP Reporting</a>
                                                            </li>
                                                            <li>
                                                                <a href="#">General ASAP Information</a>
                                                            </li>
                                                            <li>
                                                                <a href="#">Flight Attendent Incident Report</a>
                                                            </li>
                                                        </ul>
                                                    </transition>
                                                </li>

                                                <li>
                                                    <li class="split-li">
                                                        <span>
                                                            Agriculture & Customs
                                                        </span>
                                                        <a class="main-nav-spans" href="#">
                                                            <i class="fas fa-angle-down"></i>
                                                        </a>
                                                    </li>

                                                </li>
                                                <li>
                                                    <li class="sub-first-nav-li">
                                                        <a href="#">Known Crewmember</a>
                                                    </li>
                                                </li>

                                                <li>
                                                    <li class="sub-first-nav-li">
                                                        <a href="#"> Products Safety Data Search</a>
                                                    </li>

                                                </li>
                                            </ul>
                                        </div>
                                    </transition>
                                </li>
                                <li>
                                    <li class="split-li no-arrow-li">
                                        <span>
                                            <i class="fas fa-users"></i>
                                        </span>
                                        <a href="#">TRAINING</a>
                                    </li>
                                </li>
                                <li>
                                    <li class="split-li  ">
                                        <span>
                                            <i class="fas fa-user"></i>
                                        </span>
                                        ADMINSTRATION
                                        <a class="main-nav-spans" @click="admNavShow = !admNavShow" href="#">
                                            <i class="fas fa-angle-right"></i>
                                        </a>
                                    </li>
                                    <transition name="slide-right">
                                        <div class="sub-nav admin-nav-toggle" v-if="admNavShow">
                                            <div class="sub-nav-header">
                                                <h3>
                                                    <li class="split-li">
                                                        <span>
                                                            ADMINSTRATION
                                                        </span>

                                                        <a @click="admNavShow = !admNavShow" class="sub-nav-icons" href="#">
                                                            <i class="fas fa-times"></i>
                                                        </a>
                                                    </li>

                                                </h3>
                                            </div>
                                            <ul>

                                                <li>
                                                    <li class="split-li">
                                                        <span>
                                                            OJI and Leaves
                                                        </span>
                                                        <a class="main-nav-spans" href="#">
                                                            <i class="fas fa-angle-down"></i>
                                                        </a>
                                                    </li>

                                                </li>
                                                <li>
                                                    <li class="split-li">
                                                        <span>
                                                            Pay and Benefits
                                                        </span>
                                                        <a class="main-nav-spans" href="#">
                                                            <i class="fas fa-angle-down"></i>
                                                        </a>
                                                    </li>

                                                </li>
                                                <li>
                                                    <li class="split-li">
                                                        <span>
                                                            Performace
                                                        </span>
                                                        <a class="main-nav-spans" href="#">
                                                            <i class="fas fa-angle-down"></i>
                                                        </a>
                                                    </li>

                                                </li>
                                                <li>
                                                    <li class="sub-first-nav-li">
                                                        <a href="#">Inflight Resource Directory</a>
                                                    </li>

                                                </li>
                                                <li>
                                                    <li class="split-li">
                                                        <span>
                                                            Mobile and Web
                                                        </span>
                                                        <a class="main-nav-spans" href="#">
                                                            <i class="fas fa-angle-down"></i>
                                                        </a>
                                                    </li>

                                                </li>
                                                <li>
                                                    <li class="sub-first-nav-li">
                                                        <a href="#">AFA</a>
                                                    </li>
                                                </li>

                                            </ul>
                                        </div>
                                    </transition>
                                </li>
                                <li>
                                    <li class="split-li ">
                                        <span>
                                            <i class="fas fa-utensils"></i>
                                            CATERING & BRAND
                                        </span>
                                        <a class="main-nav-spans" href="#">

                                            <i class="fas fa-angle-right"></i>

                                        </a>
                                    </li>
                                </li>
                                <li>
                                    <li class="split-li no-arrow-li">
                                        <span>
                                            <i class="fas fa-bed"></i>
                                        </span>
                                        <a href="#">HOTELS</a>
                                    </li>

                                </li>
                                <li>
                                    <li class="split-li no-arrow-li">
                                        <span>
                                            <i class="fas fa-home"></i>
                                        </span>
                                        <a href="#">MY BASE</a>
                                    </li>

                                </li>
                                <li>
                                    <li class="split-li no-arrow-li">
                                        <span>
                                            <i class="fas fa-certificate"></i>
                                        </span>
                                        <a href="#">RECOGNITION</a>
                                    </li>

                                </li>
                                <li>
                                    <li class="split-li no-arrow-li">
                                        <span>
                                            <i class="fas fa-male"></i>
                                        </span>
                                        <a href="#">MY LEADERSHIP TEAM</a>
                                    </li>

                                </li>
                            </ul>
                        </div>

                    </nav>
                </transition>
            </div>
javascriptvue.jsvuejs2vue-component

Answer №1

Ever tried implementing the Vue-Clickaway functionality? Check it out here: https://github.com/simplesmiler/vue-clickaway

This is how you can use the solution:

import { mixin as clickaway } from 'vue-clickaway';

export default {
  mixins: [ clickaway ],
  template: '<p v-on-clickaway="away">Click away</p>',
  methods: {
    away: function() {
      console.log('clicked away');
    },
  },
};

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

Possible undefined object in React Redux

I'm encountering a Typescript issue where Redux object I am utilizing is potentially undefined, even though I have not specified its type as potentially being undefined or set it to be undefined anywhere in my code. /redux/globalSettings/actions.ts ...

javascriptreactjstypescriptredux

Using JavaScript code to dynamically display the value of the variable MyProperty in HTML

Are there any limitations when using this construction in JavaScript? In my codeBehind, there is a property with intricate logic in the get method. It calls other methods and despite debugging showing a good value, it returns an empty string. I'm curi ...

javascriptasp.net

Is there a problem with the Drag and Drop API?

So here's the deal: I've encountered a problem with the HTML5 Drag and Drop API. In short, besides the essential dragstart, dragover, and drop events, there are three more events - mousedown, mouseup, and mouseleave - that are crucial for achiev ...

javascriptjqueryhtmldraggable

What is the best way to mandate multiple input fields in AngularJS?

I am currently working on creating a basic web page with a few input fields that must be filled out to proceed. Below is the code I have so far: <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/l ...

javascripthtmlangularjs

recursive algorithm utilizing an array as an argument

Currently, I am in the process of developing a function that extracts chest exercises from an array titled "chest". This particular function is required to randomly select multiple exercises, achieved by utilizing a random pointer. In order to avoid selec ...

javascriptangularjs

Discover an Easy Way to Scroll to the Bottom of Modal Content with Bootstrap 5 on Your Razor Page

Currently, I am developing a web application that utilizes Razor Pages and Bootstrap 5 modals to showcase dynamic content. The challenge I am facing is ensuring that the content inside the modal automatically scrolls to the bottom when the modal opens or w ...

javascripthtmlbootstrap-5razor-pages

Design a recurring report using an endless JavaScript cycle

I am in the process of creating a brand new scheduled report and have encountered an issue. How can I incorporate a script that includes a loop to run a specific function every 10 seconds? Here's what I have so far: var count = 1; while(count > 0 ...

javascriptreportcognos

How can I convert a UTC time field from MySQL into JavaScript?

I'm struggling to pinpoint the error in my date/time difference calculations. It seems to be related to timezone variations, but I can't figure out exactly where the problem lies. Below are all the components involved - can you help me identify t ...

javascriptmysql

Delete a designated section from a URL with the power of jQuery

I have a URL like http://myurleg.com/ar/Message.html and I need to change ar to en in it when clicked on. For example, if my current URL is: http://myurleg.com/ar/Message.html After clicking, it should become: http://myurleg.com/en/Message.html I attemp ...

javascriptjqueryhtml

Tips for navigating to a different route during the ngOnInit lifecycle event

How can I automatically redirect users to a specific page when they paste a URL directly into the browser? I would like users to be directed to the /en/sell page when they enter this URL: http://localhost:3000/en/sell/confirmation Below is the code I am ...

javascriptangulartypescript

Using JQuery to search for and remove the id number that has been clicked from a specific value

I am in need of assistance with deleting the clicked id number from an input value using jQuery. I am unsure of how to proceed with this task and would appreciate some guidance. To simplify my request, let me explain what I am trying to accomplish. Take ...

javascriptjqueryhtml

Input for uncomplicated changing identifier

I am looking to create types for dynamic keys that will be of type number. I have two similar types defined as follows: type UseCalculatePayments = () => { totalPayments: number; aggregate: number; condition: boolean; }; type UseCalculateCommissio ...

javascriptreactjstypescript

Launching a segment from a different page within a foundation reveal modal

With the goal of displaying a modal that contains content from a section on another page when a link is clicked, I encountered a specific issue. For instance: <a href="/otherpage" data-reveal-id="myModal" data-reveal-ajax="true"> Click Me For A Mod ...

javascriptajaxzurb-foundationzurb-reveal

Tips for locating and substituting a string in Javascript

Is there a way to locate a particular word within a string and substitute it using JavaScript? For instance Here is a lengthy sentence I want to locate the word "sentence" and modify it to "phrase", resulting in: Here is a lengthy phrase ...

javascripthtmlstring

The issue with AngularJS ng-show and $timeout functionality not functioning as expected

As a newcomer to AngularJS, I recently started an individual project utilizing ng-show and if else statements with $timeout. Despite my efforts, I have been unable to make the answers timeout after being displayed for a few seconds. I've tried various ...

javascriptangularjs

"Implementing a Callback Function when Jquery Countdown Reaches

Implementing this plugin will result in a live countdown displayed on the webpage. I recently reviewed the on.finish callback documentation found on the Official website. The main objective is to hide the span#limit once the timer completes its countdown ...

javascriptjqueryhtml

Ways to obtain a tab and designate it as the default in angular when using angular material Tabs

I am facing an issue with accessing tabs within a nested component. The parent component contains the tab feature and to reach the tabs inside the child component, I am using the following code: document.querySelectorAll('.mat-tab-group'); The a ...

javascriptangulartypescriptangular-materialtabs

Load Vue 3 components dynamically using a string-based approach

Exploring ways to dynamically load components based on a string input. Here is an attempt at achieving this: <component v-for="component in components" :is="eval(component)" /> However, this approach does not yield the desired r ...

javascriptvue.jsvuejs3

Adjusting the width of a select box to match the size of its child table using CSS

Within my Vue application, I've implemented a select box that contains a table component. When the select box is clicked, the table becomes visible in a container. However, I'm facing an issue where I can't dynamically adjust the width of th ...

javascripthtmlcssvue.js

Improving the Efficiency of JavaScript/jQuery Code

Currently, I am delving into JavaScript and jQuery. Here is the code snippet that I am working on: $("#hrefBlur0").hover(function() { $("#imgBlur0").toggleClass("blur frame"); }); $("#hrefBlur1").hover(function() { $("#imgBlur1").toggleClass("blur fra ...

javascriptjquery