Develop Reference

I need to modify the menu so that only one sub-menu is displayed at a time, in general so that no more than one menu can be displayed at the same time

When I select an option of the menu it is displayed as it should be but when I select another option the other option is also displayed, the idea is that only one is displayed at the same time.
`
$('.sub-menu ul').hide();
$(".sub-menu a").click(function () {
$(this).parent(".sub-menu").children("ul").slideToggle("200");
$(this).find("i.fa").toggleClass("fa-angle-up fa-angle-down");
});
`
this is the code that I have in jquery and I need a change so that it only allows me to display one option instead of two.
`
<nav class='animated flipInX'>
<ul>
<li>
<a href='#'>
<div class='fa fa-home'></div>
</a>
</li>
<li>
<a href='#'>
About
</a>
</li>
<li class='sub-menu'>
<a href='#'>
Products
<i class='fa fa-angle-down'></i>
</a>
<ul>
<li>
<a href='#'>
Product Item
</a>
</li>
<li>
<a href='#'>
Product Item
</a>
</li>
<li>
<a href='#'>
Product Item
</a>
</li>
</ul>
</li>
<li class='sub-menu'>
<a href='#'>
Services
<i class='fa fa-angle-down'></i>
</a>
<ul>
<li>
<a href='#'>
Product Item
</a>
</li>
<li>
<a href='#'>
Product Item
</a>
</li>
<li>
<a href='#'>
Product Item
</a>
</li>
</ul>
</li>
<li>
<a href='#'>
Contact Us
</a>
</li>
</ul>
</nav>
This is the html code, please help me :c
`
This is the html code, please help me :c

$(".sub-menu ul").hide()
$(".sub-menu a").click(function () {
$(".sub-menu ul").not($(this)).hide();
$(this).parent(".sub-menu").children("ul").slideToggle("200");
$(this).find("i.fa").toggleClass("fa-angle-up fa-angle-down");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class='animated flipInX'>
<ul>
<li>
<a href='#'>
<div class='fa fa-home'></div>
</a>
</li>
<li>
<a href='#'>
About
</a>
</li>
<li class='sub-menu'>
<a href='#'>
Products
<i class='fa fa-angle-down'></i>
</a>
<ul>
<li>
<a href='#'>
Product Item
</a>
</li>
<li>
<a href='#'>
Product Item
</a>
</li>
<li>
<a href='#'>
Product Item
</a>
</li>
</ul>
</li>
<li class='sub-menu'>
<a href='#'>
Services
<i class='fa fa-angle-down'></i>
</a>
<ul>
<li>
<a href='#'>
Product Item
</a>
</li>
<li>
<a href='#'>
Product Item
</a>
</li>
<li>
<a href='#'>
Product Item
</a>
</li>
</ul>
</li>
<li>
<a href='#'>
Contact Us
</a>
</li>
</ul>
</nav>

How to close Toggle Navigation when users clicks outside the nav container in Vue JS

So I have a toggled navigation menu and inside that menu and I have another 2 ul menus. I want to implement a feature so If user clicks out of any navigation container toggle the navigation to close it self rather then clicking on the close button. I want to make subNavActive, safNavAcitve and repNavUl = false again when the user clicks out 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>
I-21 Injury Reporting
</li>
<li>
ASAP Reporting
</li>
<li>
General ASAP Information
</li>
<li>
Flight Attendent Incident Report
</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">
Known Crewmember
</li>
</li>
<li>
<li class="sub-first-nav-li">
Products Safety Data Search
</li>
</li>
</ul>
</div>
</transition>
</li>
<li>
<li class="split-li no-arrow-li">
<span>
<i class="fas fa-users"></i>
</span>
TRAINING
</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">
Inflight Resource Directory
</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">
AFA
</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>
HOTELS
</li>
</li>
<li>
<li class="split-li no-arrow-li">
<span>
<i class="fas fa-home"></i>
</span>
MY BASE
</li>
</li>
<li>
<li class="split-li no-arrow-li">
<span>
<i class="fas fa-certificate"></i>
</span>
RECOGNITION
</li>
</li>
<li>
<li class="split-li no-arrow-li">
<span>
<i class="fas fa-male"></i>
</span>
MY LEADERSHIP TEAM
</li>
</li>
</ul>
</div>
</nav>
</transition>
</div>

Tried using Vue-Clickaway?
https://github.com/simplesmiler/vue-clickaway
The solution can look something like this.
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');
},
},
};

Could not resolve 'javascript:;' from state 'app'

I'm facing a trouble and I'm not understanding. I have a menu of configurations and a submenu when i click on it.
<li ui-sref-active="active">
<a ui-sref="javascript:;">
<i class="fa fa-cogs"></i>
<span>Configurations</span>
</a>
<ul class="sub-menu">
<li ui-sref-active="active">
<a ui-sref="app.configurations.inventory">
<span>Devices</span>
</a>
</li>
<li ui-sref-active="active">
<a ui-sref="app.configurations.users">
<span>Users</span>
</a>
</li>
<li ui-sref-active="active">
<a ui-sref="app.configurations.networks">
<span>Networks</span>
</a>
</li>
<li ui-sref-active="active">
<a ui-sref="app.configurations.alerts">
<span>Alerts</span>
</a>
</li>
</ul>
</li>
<!-- configurations -->
The problem is when I set a ng-if I just can see the configurations menu and when I click on it I got the error "Could not resolve 'javascript:;' from state 'app'".
I know that "javascript:;" this is not defined in my routes file. This means anything specific ? This code wasnt mine and I'm trying to make some changes to control who can see the menu by doing a ng-if like
<!-- configurations -->
<li ng-if="permissionGroup.views.configurations" ui-sref-active="active">
<a ui-sref="javascript:;">
<i class="fa fa-cogs"></i>
<span>Configurations</span>
</a>
<ul ng-if="permissionGroup.views.configurations" class="sub-menu">
<li ui-sref-active="active">
<a ui-sref="app.configurations.inventory">
<span>Devices</span>
</a>
</li>
<li ui-sref-active="active">
<a ui-sref="app.configurations.users">
<span>Users</span>
</a>
</li>
<li ui-sref-active="active">
<a ui-sref="app.configurations.networks">
<span>Networks</span>
</a>
</li>
<li ui-sref-active="active">
<a ui-sref="app.configurations.alerts">
<span>Alerts</span>
</a>
</li>
</ul>
</li>
<!-- configurations -->
To get the permission group on Controller I had this piece of code
var user = JSON.parse(window.localStorage.getItem("userKey"));
$http.get('/api/organization_permissions_groups/'+user.organization_permission_group_id).success(function (data) {
$scope.permissionGroup = data;
});

You should use ng-show instead of ng-if:
<!-- configurations -->
<li ng-show="permissionGroup.views.configurations" ui-sref-active="active">
<a ui-sref="javascript:;">
<i class="fa fa-cogs"></i>
<span>Configurations</span>
</a>
<ul ng-show="permissionGroup.views.configurations" class="sub-menu">
<li ui-sref-active="active">
<a ui-sref="app.configurations.inventory">
<span>Devices</span>
</a>
</li>
<li ui-sref-active="active">
<a ui-sref="app.configurations.users">
<span>Users</span>
</a>
</li>
<li ui-sref-active="active">
<a ui-sref="app.configurations.networks">
<span>Networks</span>
</a>
</li>
<li ui-sref-active="active">
<a ui-sref="app.configurations.alerts">
<span>Alerts</span>
</a>
</li>
</ul>
</li>
<!-- configurations -->

How to keep parent li opened when i clicked the child li element

<li>
<a href="#">
<i class="entypo-tools"></i>
<span class="title">PHP-SDK</span>
<span class="badge badge-secondary">3</span>
</a>
<ul>
<li class="dropdown-submenu">
<a href="/mypage_v2/sdk/installation">
<i class="entypo-inbox"></i>
<span class="title">Installation</span>
</a>
</li>
<li class="dropdown-submenu">
<a href="/mypage_v2/sdk/getStarted">
<i class="entypo-docs"></i>
<span class="title">Getting Started</span>
</a>
</li>
<li>
<a href="#">
<i class="entypo-flash"></i>
<span class="title">API-Endpoints</span>
<span class="badge badge-info">3</span>
</a>
<ul>
<li>
<a href="#">
<i class="entypo-newspaper"></i>
<span class="title">sample1</span>
<span class="badge badge-success">4</span>
</a>
<ul>
<li>
<a href="/mypage_v2/sdk/newsletter">
<i class="entypo-newspaper"></i>
<span class="title">sample1</span>
</a>
</li>
<li>
<a href="/mypage_v2/sdk/newsletterEmail">
<i class="entypo-newspaper"></i>
<span class="title">sample2</span>
</a>
</li>
<li>
<a href="/mypage_v2/sdk/newsletteranalytics">
<i class="entypo-newspaper"></i>
<span class="title">sample2</span>
</a>
</li>
<li>
<a href="/mypage_v2/sdk/sample2">
<i class="entypo-newspaper"></i>
<span class="title">NewslettersProcess</span>
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>

If you use php rendering and on menu item click page refreshes, you can add class for example "active" to parent li(s), and in styles add li.active {display:block} or something like that style to show hidden elements

Finally i am ok with the condition of laravel routes
<li #if(Request::path() == "mypage_v2/applications/lists" || Request::path() == "mypage_v2/applications/register") class="active opened")#endif>

how to pushup the content when clicks on dropdown list item in bootstarp

Hi,My question is how to drag the content when clicks on any option in
dropdown,colud you please tel me...
it is leftside menu-bar,when clicks on any dropdown item it is covering the below menu-bar list,so i need to drag the other menu bar
list when clicks on any dropdown list..
<ul class="sidebar-menu">
<li>
<a href="index.html">
<i class="fa fa-dashboard"></i> <span>Dashboard</span>
</a>
</li>
<li class="active dropdown">
<a href="general.html" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-gavel"></i> <span>General <span class="caret"></span></span>
</a>
<ul class="dropdown-menu">
<li><a href="#General1" class="btn btn-success" data-toggle="tab" >General1</a></li>
<li><a href="#General2" class="btn btn-success" data-toggle="tab" >General2</a></li>
<li>General3</li>
</ul>
</li>
<li>
<a href="basic_form.html">
<i class="fa fa-globe"></i> <span>Basic Elements</span>
</a>
</li>
<li>
<a href="simple.html">
<i class="fa fa-glass"></i> <span>Simple tables</span>
</a>
</li>
</ul>