我们正在使用MDC菜单组件。我正在寻找一种在单击菜单中的第一项时不关闭菜单的方法。
我尝试将一个类应用于mdc-list-item并将游标指定为auto,但它不起作用。
.menu-do-not-close {
cursor: auto !important;
}
下面是小提琴示例
https://jsfiddle.net/phani25485/Lt6q2gxa/2/
您能否提供有关如何实现此目标的指导。
答案 0 :(得分:3)
在为事件目标指定了特定类别后,可以通过在mdc-list-item
click事件上调用const options = document.querySelectorAll('.mdc-list-item');
//Prevent menu close when option with 'prevent-menu-close' class clicked
for (let option of options) {
option.addEventListener('click', (event) => {
let prevent = event.target.classList.contains('prevent-menu-close');
if(prevent){
event.stopPropagation();
// handle 'prevent-menu-close' list item click event
}
});
}
来选择特定项目,然后停止菜单的关闭(因此,将菜单切换为打开和关闭)仅通过按钮)。您将需要添加一些其他代码来处理列表项的点击事件,因为这会阻止正常的mdc点击处理。
JS:
<div id="demo-menu" class="mdc-menu-surface--anchor">
<button id="menu-button">Open Menu</button>
<div class="mdc-menu mdc-menu-surface" tabindex="-1">
<ul class="mdc-list" role="menu" aria-hidden="true" aria-orientation="vertical">
<li class="mdc-list-item prevent-menu-close" role="menuitem">
<span class="mdc-list-item__text">Prevent Close</span>
</li>
<li class="mdc-list-item" role="menuitem">
<span class="mdc-list-item__text">Another Menu Item</span>
</li>
</ul>
</div>
</div>
HTML:
import UIKit
class NavigationViewController: UIViewController {
var menu_vc: MenuViewController!
@IBOutlet weak var navigation_item: UINavigationItem!
override func viewDidLoad() {
super.viewDidLoad()
self.navigationController?.navigationBar.barTintColor = UIColor.blueColor()
menu_vc = self.storyboard?.instantiateViewControllerWithIdentifier("MenuViewController") as! MenuViewController
let swipeRight = UISwipeGestureRecognizer(target: self, action: "clickRight")
swipeRight.direction = UISwipeGestureRecognizerDirection.Right
self.view.addGestureRecognizer(swipeRight)
let swipeLeft = UISwipeGestureRecognizer(target: self, action: "clickRight")
swipeLeft.direction = UISwipeGestureRecognizerDirection.Left
self.view.addGestureRecognizer(swipeLeft)
}
func clickRight(gesture : UISwipeGestureRecognizer)-> Void
{
switch gesture.direction
{
case UISwipeGestureRecognizerDirection.Right:
show_menu()
case UISwipeGestureRecognizerDirection.Left:
close_on_swipe()
default:
break
}
}
func close_on_swipe()
{
if AppDelegate.menu_bool
{
}else
{
close_menu()
}
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
}
@IBAction func btn_show_navigation(sender: UIButton) {
if AppDelegate.menu_bool
{
show_menu()
}else
{
close_menu()
}
}
@IBAction func btn_search(sender: UIButton) {
NSLog("bbb", "ccc")
}
func show_menu()
{
UIView.animateWithDuration(0.3){ ()->Void in
self.menu_vc.view.frame = CGRect(x: 0,y: 0,width:
UIScreen.mainScreen().bounds.size.width,height:
UIScreen.mainScreen().bounds.size.height)
self.addChildViewController(self.menu_vc)
self.view.addSubview(self.menu_vc.view)
AppDelegate.menu_bool = false
}
}
func close_menu()
{
UIView.animateWithDuration(0.3, animations: { ()->Void in
self.menu_vc.view.frame = CGRect(x: -UIScreen.mainScreen().bounds.size.width,y: 0,width: UIScreen.mainScreen().bounds.size.width,height: UIScreen.mainScreen().bounds.size.height)}){(finished) in
self.menu_vc.view.removeFromSuperview()
}
AppDelegate.menu_bool = true
}
}