Question

我有一个导航，当您点击某个链接时，它会将您带到另一个网页。这是我的代码：

<ul class="nav-list">
    <li class="mobile-homepage"><a (click)="selectPage('homepage')">{{'NAVIGATION_HOMEPAGE'|translate}}</a></li>
    <li><a (click)="selectPage('solutions')" class="main-links separate">{{'NAVIGATION_SOLUTIONS'|translate}}</a>
        <ul class="nav-dropdown set-width">
            <li><a (click)="selectPage('solutions', 'collect')" >{{'NAVIGATION_CLICK_COLLECT'|translate}}</a></li>
            <li><a (click)="selectPage('solutions', 'returns')">{{'NAVIGATION_STORE_RETURNS'|translate}}</a></li>
            <li><a (click)="selectPage('solutions', 'aisle')" >{{'NAVIGATION_ENDLESS_AISLE'|translate}}</a></li>
            <li><a (click)="selectPage('solutions', 'store')" >{{'NAVIGATION_STORE_FULFILMENT'|translate}}</a></li>
            <li><a (click)="selectPage('solutions', 'customer')" >{{'NAVIGATION_CUSTOMER_CARE'|translate}}</a></li>
            <li><a (click)="selectPage('solutions', 'partner')" >{{'NAVIGATION_PARTNER_FULFILMENT'|translate}}</a></li>
        </ul>
    </li>
</ul>

您可以在第二个li (click)="selectPage('solutions')上看到点击事件我的问题是，我想在移动设备上禁用该链接。它打开一个下拉菜单，所以我不想完全禁用它，我只是想要它在移动设备上，当你点击该链接时，只打开下拉菜单，它不会带你到一个新的像桌面上的页面。

有谁知道如何使用jQuery做到这一点？

Answer 1

简单的解决方案是复制链接，并通过media queries使用CSS显示或不显示链接。

<li class="desktop"><a (click)="selectPage('solutions', 'collect')" >
<li class="mobile"><a (click)="selectMobilePage('solutions', 'collect')" >

另一种解决方案是检查selectPage函数中的screen size：

if(window.innerWidth >= xxx) { ... }

更好的解决方案是创建一个服务，该服务将监听调整大小事件并返回布尔值，无论是否在移动设备上。

伪代码：

@Injectable()
export class ScreenService {

  public resize$;

  constructor() {
    this.resize$ = new BehaviorSubject<null>(null);
    Observable.fromEvent(window, 'resize').subscribe(() => this.onResize());
  }

  private onResize() {
    this.setSize();
    this.resize$.next();
  }

  private setSize() {
    this.screenHeight = window.innerHeight;
    this.screenWidth = window.innerWidth;
  }

  isMobile() {
    return this.screenWidth >= xxx; // your choice
  }

}

Answer 2

你可以使用这个或类似的lib（我见过另一个不能回想起名字atm） https://www.npmjs.com/package/ng2-device-detector

这将让您检查用户是否在移动设备上或其他任何设备上。

或者您可以按照类似的问题执行操作，使用flexbox检测屏幕宽度并进行相应调整，如下所示：

<mat-toolbar class="fixed-navbar mat-elevation-z6" color="accent">

      <button mat-button (click)="sidenav.open()" fxHide="false" fxHide.gt-lg>
        <mat-icon>menu</mat-icon>
      </button>
      <div fxLayout>
        <button mat-button routerLink="/"><div class="title">{{title}}</div></button>
      </div>

      <div fxFlex="grow"></div>
      <div style="padding-right: 20px;">
        <div fxLayout fxShow="false" fxShow.gt-lg>
          <button mat-button [mat-menu-trigger-for]="infoMenu"><span>Information</span></button>
          <button mat-button [mat-menu-trigger-for]="toolsMenu"><span>Tools</span></button>
          <button mat-button [mat-menu-trigger-for]="userMenu"><span>User</span></button>
          <button mat-icon-button [mat-menu-trigger-for]="colors"><mat-icon>format_color_fill</mat-icon></button>
        </div>
      </div>
    </mat-toolbar>

要正确看到这一点，你可以看一下：

https://github.com/kenji-1996/CallumTech/blob/master/src/app/component/navbar/navbar.component.html

使用Angular删除移动设备上的点击功能

2 个答案: