この機能は、実際にはセカンダリメニューの表示と非表示に相当しますが、Vueを使用して実行するだけです。
関数の簡単なデモンストレーションです。cssの境界線は無視してください。
このデモには、それについて話すだけで、いくつかの困難があります。
Vueのクリックによる表示と非表示は、実際にはvueのプロパティがtrueかどうかの判断に依存します。vueは自動的に表示または非表示になりますが、「表示」ボタンが下部にある場合、このデモは解決されないという問題があります。ページの、ウェブページでは下向きではなく上向きに見えるはずです。スクロールバーには余分な長さを保持するための余分な部分があります。最初に開いたときにウェブページの高さに応じて調整しただけです。セカンダリメニューが上向きに表示されるようにします。
それは問題を解決しなかっただけです。
次に、第2レベルのメニューまたは第3レベルのメニューが表示されているときに、マウスがWebページの位置をクリックすると、第2レベルと第3レベルのメニューがすべて非表示になります。これは難しい点です。Baiduで見つけた解決策は、原則はあまり明確ではありません、大きな人がいます私に何か説明してもらえますか？
第三に、実際にvueで問題が発生しました。第2レベルのメニューがmouseenter状態になり、第3レベルのメニューもmouseenter状態になります。その後、cssにカーソルを合わせると第3レベルのメニューにcssを追加できません。理由がわかりませんか？
あまりナンセンスではありません。コードに移動してください。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue点击切换显示隐藏</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<style>
*{
padding: 0px;
margin: 0px;
}
ul li,ul li a{
list-style-type:none ;
text-decoration: none;
}
#example{
height: 30px;
position:absolute;
margin-top: 500px;
border:1px solid #000;
}
div#tip{
position:relative;
width:150px;
height: 68px;
padding: 10px 0px;
box-shadow: #666 0px 1px 1px 1px;
border:1px solid #00CC66;
}
#tip ul li a,.two a{
text-align: center;
margin: 0px auto;
color: #000;
font-size: 12px;
border: 1px solid #000;
display: block;
height: 34px;
line-height: 34px;
width: 150px;
background-color:#fff;
}
.two{
border:1px solid #000;
width: 150px;
position: relative;
padding: 10px 0px;
left: 150px;
}
#tip ul li a:hover{
background: #F0F0F0;
}
.songActive{
background: #F0F0F0;
}
.song{
background: #fff;
}
</style>
<body>
<div id="example">
<button v-text="btnText" @click="showToggle" v-clickoutside="handleClose"></button>
<div v-show="isShow" id="tip" v-bind:style="{left:popup.x , top:popup.y }" @click.stop="isShow=true">
<ul>
<li>
<a href="javascript:void(0)" @mouseenter="enter($event)"
v-bind:style="{background:song.colorB}">
<i class="layui-icon-add-1"></i>添加到歌单<i class="layui-icon-right"></i>
</a>
</li>
<li>
<a href="javascript:void(0)" @mouseenter="enter($event)"
v-bind:style="{background:song.colorA}">
<i class="layui-icon-add-1"></i>添加到电台<i class="layui-icon-right"></i>
</a>
</li>
</ul>
<ul class="two" v-if="showSong" v-bind:style="{bottom:song.y}">
<li>
<a href="javascript:void(0)">轻音乐</a>
</li>
<li>
<a href="javascript:void(0)">爵士</a>
</li>
</ul>
</div>
</div>
<script type="text/javascript">
var H = document.documentElement.clientHeight || document.body.clientHeight;
console.log(H);
const clickoutside = {
// 初始化指令
bind(el, binding, vnode) {
function documentHandler(e) {
// 这里判断点击的元素是否是本身，是本身，则返回
if (el.contains(e.target)) {
return false;
}
// 判断指令中是否绑定了函数
if (binding.expression) {
// 如果绑定了函数 则调用那个函数，此处binding.value就是handleClose方法
binding.value(e);
}
}
// 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听
el.__vueClickOutside__ = documentHandler;
document.addEventListener('click', documentHandler);
},
update() {},
unbind(el, binding) {
// 解除事件监听
document.removeEventListener('click', el.__vueClickOutside__);
delete el.__vueClickOutside__;
}
};
new Vue({
el:"#example",
data:{
btnText:"显示",
isShow:false,
popup:{
x:'',
y:''
},
showSong:false,
song:{
y:'',
colorA:'',
colorB:''
}
},
directives: {clickoutside},
methods:{
handleClose:function(){
this.isShow=false;
this.showSong=false;
this.song.colorA='#fff';
this.song.colorB='#fff';
},
showToggle:function(e){
console.log(e);
this.isShow = !this.isShow;
var Y=e.pageY;
var X=e.pageX;
var top=0;
var left=0;
console.log(Y,X)
if(Y<(H-20)){
top=0;
left=X+10;
}else{
top=-80;
left=X+10;
}
console.log(top+","+left);
this.popup.x=left+'px';
this.popup.y=top+'px';
// $('#tip').css({
// 'top' : top + 'px',
// 'left': left+ 'px'
// });
if(this.isShow){
this.btnText = "显示"
}else{
this.btnText = "隐藏"
}
},
enter:function(e){
e.stopPropagation();
console.log(e)
this.showSong=true;
//获得移入的元素
var element=e.target;
this.song.colorA='#fff';
this.song.colorB='#fff';
if(element.innerText=="添加到电台"){
this.song.y=34+'px';
this.song.colorA='#F0F0F0';
}else if(element.innerText=="添加到歌单"){
this.song.y=68+'px';
this.song.colorB='#F0F0F0';
}
},
leave:function(e){
this.showSong=false;
}
}
})
</script>
</body>
</html>
コードは非常に単純で、説明なしで理解できるはずであり、いつでも質問をすることができます。