Bootstrap 5.3 下拉链接在移动 Safari 上不起作用

Question

我有一个搜索输入，当我专注于搜索输入时，我会触发实时搜索结果 div。结果列表在桌面上完美运行，但即使它在手机上正确呈现，列表链接也无法单击。当我点击链接时，它会关闭结果 div。

但是当我长按链接时，它会显示我是否想在新选项卡中打开链接。一般情况下应该直接打开链接。

这是 HTML 代码：

<div class="search-list">
<ul class="dropdown-menu show" data-bs-popper="static" role="menu">
    @foreach($results as $result)
        <li><a class="dropdown-item" href="{{route('PostShow', $result->id)}}">{{$result->title}}</a></li>
    @endforeach

    @foreach($movies as $movie)
        <li>
            @if($movie['poster_path'])
                <a class="dropdown-item" href="{{route('Movies.show', $movie['id'])}}">
                    {{$movie['title']}} ({{date('Y', strtotime($movie['release_date']))}})
                </a>
            @else
                <a class="dropdown-item" href="{{route('Movies.show', $movie['id'])}}">
                    <img src="{{asset('images/no-poster.png')}}" alt="" style="width: 20px">
                    {{$movie['title']}} ({{date('Y', strtotime($movie['release_date']))}})
                </a>
            @endif
        </li>
    @endforeach

    @foreach($actors as $actor)
        <li>
            @if($actor['profile_path'])
                <a class="dropdown-item" href="{{route('Actors.show', $actor['id'])}}">
                    {{$actor['name']}}
                </a>
            @else
                <a class="dropdown-item" href="{{route('Actors.show', $actor['id'])}}">
                    <img src="{{asset('images/no-profile.png')}}" alt="" style="width: 20px">
                    {{$actor['name']}}
                </a>
            @endif
        </li>
    @endforeach
</ul>

这是我的 CSS 代码：

.dropdown-menu {
border: none;
background-color: rgba(14, 14, 19, 0.9);
box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px,
    rgba(0, 0, 0, 0.23) 0px 6px 6px;
}
.dropdown-menu::after {
content: "";
position: absolute;
border-radius: 8px;
top: 0;
left: 0;
width: 100%;
height: 100%;
backdrop-filter: blur(7px) !important;
z-index: -1;
}
.dropdown-item {
border-radius: 3px;
text-wrap: pretty;
}
.navbar-search {
position: relative;
}
.search-list {
display: none;
position: absolute;
min-width: 250px;
max-width: 250px;
text-wrap: pretty;
top: 100%;
left: 0;
margin-top: 8px;
z-index: 1000;
}
.navbar-search:focus-within .search-list {
display: block;
}

您可以通过此链接查看我的意思。预先感谢您的帮助。

Answer 1

.navbar-search:focus-within .search-list {
    display: block;
}

破解密码。用 Js 隐藏类解决了我的问题。