ตอนนี้ผมเขียนโปรเจ็คอยู่โปรเจ็คหนึง ซึ่งผมต้องใช้ TreeView ในการทำงาน
นี้คือโคดที่ผมใช้ (
https://codepen.io/anon/pen/WaoBZY)
ซึ่งตอนนี้มีเมนูขึ้นมาตอนที่เมาส์ลากผ่าน ที่ผมต้องการให้เมนูขึ้นเฉพาะตอนคลิกขวาเท่านั้น
ไม่รู้ผมมาถูกทางไหมนะ แต่ผมหาคำตอบมาสองวันละ ผมเขียน Basic ยังแทบไม่รู้เรื่อง ที่หาเห็นมีแต่ Advance
(ผมอยากได้ประมาณแบบนี้
https://jsfiddle.net/Wijmo5/kt8r17hq/ ครับ)
[โคตผม
<div class="dropdown">
<v-container >
<ul id="myUL">
<li><button @contextmenu.prevent="handler"><span class="caret"><input type="checkbox" data-role="switch">Organization (Blank)</span></button>
<ul class="nested">
<li><button @contextmenu.prevent="handler"><input type="checkbox" data-role="switch">Department (Blank)</button></li>
<li><button @contextmenu.prevent="handler"><input type="checkbox" data-role="switch">Local Administration (Blank)</button></li>
<ul class="nested">
<li><button @contextmenu.prevent="handler"><input type="checkbox" data-role="switch">User ID (Blank)</button></li>
<li><button @contextmenu.prevent="handler"><input type="checkbox" data-role="switch">User ID (Blank)</button></li>
</ul>
</ul>
</li>
</ul>
</v-container>
<div @click="handler" class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<style>
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 100px;
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 2px 1px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #adadad;}
</style>
]
vue.js
นี้คือโคดที่ผมใช้ (https://codepen.io/anon/pen/WaoBZY)
ซึ่งตอนนี้มีเมนูขึ้นมาตอนที่เมาส์ลากผ่าน ที่ผมต้องการให้เมนูขึ้นเฉพาะตอนคลิกขวาเท่านั้น
ไม่รู้ผมมาถูกทางไหมนะ แต่ผมหาคำตอบมาสองวันละ ผมเขียน Basic ยังแทบไม่รู้เรื่อง ที่หาเห็นมีแต่ Advance
(ผมอยากได้ประมาณแบบนี้ https://jsfiddle.net/Wijmo5/kt8r17hq/ ครับ)
[โคตผม
<div class="dropdown">
<v-container >
<ul id="myUL">
<li><button @contextmenu.prevent="handler"><span class="caret"><input type="checkbox" data-role="switch">Organization (Blank)</span></button>
<ul class="nested">
<li><button @contextmenu.prevent="handler"><input type="checkbox" data-role="switch">Department (Blank)</button></li>
<li><button @contextmenu.prevent="handler"><input type="checkbox" data-role="switch">Local Administration (Blank)</button></li>
<ul class="nested">
<li><button @contextmenu.prevent="handler"><input type="checkbox" data-role="switch">User ID (Blank)</button></li>
<li><button @contextmenu.prevent="handler"><input type="checkbox" data-role="switch">User ID (Blank)</button></li>
</ul>
</ul>
</li>
</ul>
</v-container>
<div @click="handler" class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<style>
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 100px;
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 2px 1px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #adadad;}
</style>
]