Question

我正在编写一个带有两个复选框的菜单（来自Angular的mat菜单，带有原生Javascript复选框），如果我没有完全点击不起作用的框，则菜单正在关闭且框未检查...

顺便说一下，当我点击菜单时，我还没有找到如何阻止自动关闭菜单。

你有解决方案吗？

<!-- app.component.html -->

<div class="header">
  <mat-toolbar color="warn">OpenLayers</mat-toolbar>

  <div class="menu">
    <button mat-button [matMenuTriggerFor]="menu">Marqueurs</button>
    <mat-menu #menu="matMenu">
      <button mat-menu-item>
        <p>Piscines : <input type="checkbox" id="piscine" name="piscine" (change)="handleSelected1($event)"/></p>
      </button>
      <button mat-menu-item>
        <p>Parkings : <input type="checkbox" id="parking" name="parking" (change)="handleSelected2($event)"/></p>
      </button>
    </mat-menu>
  </div>
</div>

Answer 1

这是使用CSS :after伪元素扩展复选框区域的简单方法：

＆＃13;

p, label, button, .chk-extended{
  position: relative;
}

/* The above element position will be taken as reference
   for the pseudo-element absolute positioning below:
*/

.chk-extended:after,
.chk-over-elm:after{
  position: absolute;
  content: '';
  border: 1px dotted gray; /* For visibility */
  /* The below can be adjusted */
  top: -0.5em;
  bottom: -0.5em;
  left: -0.5em;
  right: -0.5em;
}

＆＃13;

Regular:<input type="checkbox" />
<br><br>
Extended:<input class='chk-extended' type="checkbox" />
<br><br>
<label>Extended on label:<input class='chk-over-elm' type="checkbox" /></label>
<br><br>
<button>Extended on button:<input class='chk-over-elm' type="checkbox" /></button>
<br>
<p>Extended on p:<input class='chk-over-elm' type="checkbox" /></p>

＆＃13;

请注意，我在我的代码段中使用了p，label，button作为示例，但它可以与其他任何内容一起使用。
此外，您可能需要在CSS规则上使用!important来覆盖已设置的规则。

希望它有所帮助。

扩展复选框

1 个答案: