单击第一个菜单项后防止MDC菜单关闭

时间:2018-07-06 13:30:20

标签: javascript material-design material-components material-components-web mdc-components

我们正在使用MDC菜单组件。我正在寻找一种在单击菜单中的第一项时不关闭菜单的方法。

我尝试将一个类应用于mdc-list-item并将游标指定为auto,但它不起作用。

.menu-do-not-close {
   cursor: auto !important;
}

下面是小提琴示例

https://jsfiddle.net/phani25485/Lt6q2gxa/2/

您能否提供有关如何实现此目标的指导。

1 个答案:

答案 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

    }
}