如何在用户在Vue JS中的导航容器外部单击时关闭切换导航
如何在用户在Vue JS中的导航容器外部单击时关闭切换导航
提问于 2018-03-18 11:22:40
所以我有一个切换的导航菜单，在这个菜单里面，我有另外两个ul菜单。我想实现一个功能，这样如果用户单击任何导航容器，切换导航以自动关闭它，而不是单击关闭按钮。当用户在切换的导航容器中单击时，我想再次将subNavActive、safNavAcitve和repNavUl设置为false。新的Vue({ el：'#app'，
data: {
visible: false,
home: true,
show: false,
active: false,
subNavActive: false,
safNavShow: false,
repNavUl: false,
admNavShow: false,
rotateDropDown: false
},
methods: {}
});下面的HTML代码
<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>Stack Overflow用户
发布于 2018-03-18 12:00:33
已尝试使用Vue-Clickaway？https://github.com/simplesmiler/vue-clickaway
解决方案可以看起来像这样。
从‘vue- clickaway’导入{ mixin as clickaway}；
export default {
mixins: [ clickaway ],
template: '<p v-on-clickaway="away">Click away</p>',
methods: {
away: function() {
console.log('clicked away');
},
},
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49344183
复制相关文章
相似问题
腾讯云开发者
