Question

我有一个导航栏，当你点击它时会扩展，但是当我尝试与输入和按钮交互时，我无法点击它们。我知道这是导航栏的一个问题，因为我尝试删除它，网站工作得非常好。我认为我如何扩展它有一个问题，因为如果你去addNote页面，最后一个输入框工作正常，但只有一半是可点击的。

https://postnote.herokuapp.com/addNote

这是菜单的css：

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;

internal class Program
{
    static void Main(string[] args)
    {
        foreach (var s in Make3CharChunks(File.ReadAllText( /*your file path here*/ ""))
            Console.WriteLine(s);

        Console.ReadLine();
    }

    static IEnumerable<string> Make3CharChunks(string s)
                        => s.Aggregate(new List<string>(), (acc, c) =>
                {
                    if (acc.Any() && acc.Last().Count() < 3)
                        acc[acc.Count - 1] = $"{acc.Last()}{c}";
                    else
                        acc.Add(c.ToString());

                    return acc;
                });
}

这是菜单的html（在反应中为v4）：

.menu{
  background: red;
  width:100%;
  min-height:10vh;
  position: fixed;
  left:0px;
  top:0px;
  z-index: 10;
  border-bottom: 0.4px solid #C0C5CD;
  transition: 0.3s ease-in-out;
  cursor: pointer;
}
.menu-item{
  font-size:0em;
  color:black;
  margin-top: 1.2vh;
  display:block;
  opacity:0;
  height: 0px;
  transition: 0.3s ease-in-out;
  border-bottom: 0.7px solid #C0C5CD;
  background:red;
  display: none;
}
.menu-item-extend{
  opacity:1;
  height: 5.5vh;
  font-size: 1.6em;
  display: block;
}
.noStyle{
  border: none;
}

Answer 1

你的包装div.center.center-v-outer由于.center-v-outer上的'height：50vh'而覆盖了表单。如果删除它，一切都应该正常。

此外，您可能应该将菜单移出表单;）

css - 扩展导航栏可防止点击输入

1 个答案: