jquery - 为什么jquery Mmenu在PC上的响应模式下溢出，但在iphone上没有？

问题描述

我正在使用 mmenu 设置在移动设备上使用的过滤器。我在开发时遇到的一个问题是，每当我单击菜单中的任何内容时，菜单都会溢出。这只发生在浏览器中的移动响应模式下，在实际的 iphone 上它可以正常工作。

点击前：

点击后：

该站点有 2 个 Mmenu，一个用于引导导航，一个用于此过滤器。用于引导导航的那个工作正常。

导航代码：

<div id="filterHolder">
    <nav id="clinicFilter">
        <div id="settings">
            <ul>
                <li class="Divider">&nbsp;</li>
                <li id="setting-location">
                    <span>
                        <em class="Counter">Alla</em>
                        Stad
                    </span>
                    <div id="locations">
                        <ul>
                            <li class="searchresult Divider">Searchresults (fake)</li>
                            <li class="searchresult"><span>Amsterdam</span></li>
                            <li class="searchresult"><span>Athens</span></li>
                            <li class="Divider">&nbsp;</li>

                            <li><span>Current location</span></li>
                            <li class="Divider">&nbsp;</li>
                            <li class="Divider">Recently searched</li>
                            <li><span>Amsterdam</span></li>
                            <li><span>London</span></li>
                            <li><span>Tokyo</span></li>
                        </ul>
                    </div>
                </li>
                <li id="setting-radius">
                    <span>
                        <em class="Counter">Alla</em>
                        Behandlar
                    </span>
                    <div id="radius">
                        <ul>
                            <li>
                                <span>Alla</span>
                                <input type="radio" name="radius" class="Check" checked/>
                            </li>
                            <li>
                                <span>Hund</span>
                                <input type="radio" name="radius" class="Check" />
                            </li>
                            <li>
                                <span>Katt</span>
                                <input type="radio" name="radius" class="Check" />
                            </li>
                            <li>
                                <span>Smådjur</span>
                                <input type="radio" name="radius" class="Check" />
                            </li>
                            <li>
                                <span>Häst</span>
                                <input type="radio" name="radius" class="Check" />
                            </li>
                        </ul>
                        <p class="mmpanelSetAnimalType">
                            <a href="#settings" class="button">Filtrera</a>
                        </p>
                    </div>
                </li>
                <li class="Divider">Filter</li>
                <li>
                    <span>Vetified</span>
                    <input type="checkbox" class="Toggle" />
                </li>
                <li>
                    <span>Hög kundnöjdhet</span>
                    <input type="checkbox" class="Toggle" />
                </li>
                <li>
                    <span>Transparent prislista</span>
                    <input type="checkbox" class="Toggle" />
                </li>
                <li>
                    <span>Jour</span>
                    <input type="checkbox" class="Toggle" />
                </li>
                <li>
                    <span>Har butik</span>
                    <input type="checkbox" class="Toggle" />
                </li>
            </ul>

            <br />
            <p class="mm-button">
                <a href="#/search" class="button">Filtrera</a>
            </p>
        </div>
    </nav>

</div>

导航-JS：

document.addEventListener(
    "DOMContentLoaded", () => {
        const menu = new Mmenu("#clinicFilter", {
            //options
            "navbars": [
                {
                    "position": "top",
                    "content": [
                        "close"
                    ]
                }
            ],
            pageScroll: true,
            slidingSubmenus: true,
            searchfield: {
                add: true,
                addTo: "#locations",
                placeholder: "Stad",
                showTextItems: true
            },
            onClick: {
                setSelected: false
            },
            navbar: {
                title: "Filtrera"
            },
            extensions: ["border-none", "pagedim-black"]
        }, {
            //Configuration
        });
    }
);

标签： jquerybootstrap-4mmenu

jquery - 为什么jquery Mmenu在PC上的响应模式下溢出，但在iphone上没有？

问题描述

解决方案

推荐阅读