Question

我有一个下拉菜单按钮，单击该图标应将其打开，单击该图标或该图标时应将其再次关闭，但保持打开状态。

这也是我指的是屏幕截图。

我对此问题进行了研究，但找不到解决方法。

我的CSS位于https://pastebin.com/BHXNjtWJ上的粘贴容器中

这是因为CSS很适合在这里使用。

我的HTML是：

<body class="twoCol react menuOpen" data-tippy-delegate="">
    <div id="fb-root"></div> 
    <div id="app-root" class="notranslate" data-tippy-delegate="">
        <div class="Master__wrap__22Bnx en-US">
            <div class="NavigationTop__wrap__fQdBR">
                <div class="NavigationTop__inner__1LxZ7" data-ui-name="headerNavigation">
                    <ul class="NavigationMain__nav__3NRm2">
                        <li class="NavigationMain__signUp__2YtN8"><a href="https://signin.rockstargames.com/create/?cid=socialclub&amp;lang=en-US&amp;returnUrl=%2F" class="NavigationMain__navLink__1xmUY NavigationMain__navLinkHighlight__pgt2K" data-ui-name="signUp">Sign Up</a></li>

                        <li class="NavigationMain__signIn__3thGS"><a href="https://signin.rockstargames.com/connect/authorize/socialclub?lang=en-US&amp;returnUrl=%2F" class="NavigationMain__navLink__1xmUY" data-ui-name="signIn">Sign In</a></li>

                        <li><a class="NavigationMain__navLink__1xmUY" data-ui-name="games" href="/games">Games<span>
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" height="16" width="16" class="NavigationMain__navLinkToggle__2xOGg"><path d="M16 25.9c-.4 0-.8-.2-1-.5L.3 8.4c-.5-.6-.4-1.4.2-1.9.6-.5 1.4-.5 1.9.1L16 22.4 29.6 6.6c.5-.6 1.3-.6 1.9-.1.6.5.6 1.4.1 1.9L17 25.4c-.2.3-.6.5-1 .5z"></path></svg></span></a>

                        <ul class="NavigationMain__navSub__3W27M"><li><a class="NavigationMain__navLinkSub__2T3V5" data-ui-name="rdr2" href="#">Title<span>
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" height="16" width="16" class="NavigationMain__navLinkToggle__2xOGg">
                                <path d="M16 25.9c-.4 0-.8-.2-1-.5L.3 8.4c-.5-.6-.4-1.4.2-1.9.6-.5 1.4-.5 1.9.1L16 22.4 29.6 6.6c.5-.6 1.3-.6 1.9-.1.6.5.6 1.4.1 1.9L17 25.4c-.2.3-.6.5-1 .5z"></path></svg></span></a>

                        <ul class="NavigationMain__navSubSub__2bkYi">
                            <li><a class="NavigationMain__navLinkSub__2T3V5" href="#">Title</a></li>

                            <li><a class="NavigationMain__navLinkSub__2T3V5" href="#">Story</a></li>

                            <li><a class="NavigationMain__navLinkSub__2T3V5" href="#">Title</a></li>

                            <li><a class="NavigationMain__navLinkSub__2T3V5" href="#">Title</a></li>

                            <li><a class="NavigationMain__navLinkSub__2T3V5" href="Title">Title</a></li>

                            <li><a class="NavigationMain__navLinkSub__2T3V5" href="#">Title</a></li>

                            <li><a class="NavigationMain__navLinkSub__2T3V5" href="#">Title</a></li>
                        </ul>
                    </li>
                    <li><a href="#" class="NavigationMain__navLinkSub__2T3V5" data-ui-name="gtav">Title<span>
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" height="16" width="16" class="NavigationMain__navLinkToggle__2xOGg"><path d="M16 25.9c-.4 0-.8-.2-1-.5L.3 8.4c-.5-.6-.4-1.4.2-1.9.6-.5 1.4-.5 1.9.1L16 22.4 29.6 6.6c.5-.6 1.3-.6 1.9-.1.6.5.6 1.4.1 1.9L17 25.4c-.2.3-.6.5-1 .5z"></path></svg></span></a>

                        <ul class="NavigationMain__navSubSub__2bkYi">
                            <li><a href="#" class="NavigationMain__navLinkSub__2T3V5" data-ui-name="gtavCareer">Title</a></li>

                            <li><a href="#" class="NavigationMain__navLinkSub__2T3V5" data-ui-name="gtavAccomplishments">Title</a></li>

                            <li><a href="#" class="NavigationMain__navLinkSub__2T3V5" data-ui-name="gtavTutorials">Title</a></li>

                            <li><a href="#" class="NavigationMain__navLinkSub__2T3V5" data-ui-name="playlists">Playlists</a></li>
                        </ul>
                    </li>
                    <li><a href="#" class="NavigationMain__navLinkSub__2T3V5" data-ui-name="lan">Title</a></li>

                    <li><a href="#" class="NavigationMain__navLinkSub__2T3V5" data-ui-name="lanvr">Title</a></li>

                    <li><a href="#" class="NavigationMain__navLinkSub__2T3V5" data-ui-name="bully">Title</a></li>

                    <li><a class="NavigationMain__navLinkSub__2T3V5" data-ui-name="allGames" href="/games">All Games</a></li>
                </ul>
                <div class="NavigationMain__overlay__3SibJ"></div></li><li><a class="NavigationMain__navLink__1xmUY" data-ui-name="crews" href="/crews">Title<span>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" height="16" width="16" class="NavigationMain__navLinkToggle__2xOGg"><path d="M16 25.9c-.4 0-.8-.2-1-.5L.3 8.4c-.5-.6-.4-1.4.2-1.9.6-.5 1.4-.5 1.9.1L16 22.4 29.6 6.6c.5-.6 1.3-.6 1.9-.1.6.5.6 1.4.1 1.9L17 25.4c-.2.3-.6.5-1 .5z"></path></svg></span></a>

                    <ul class="NavigationMain__navSub__3W27M"><li><a class="NavigationMain__navLinkSub__2T3V5" data-ui-name="crewSearch" href="/crews">Search</a></li>
                        <li><a href="#" class="NavigationMain__navLinkSub__2T3V5" data-ui-name="myCrews">Create a Title</a></li>

                        <li><a href="#" class="NavigationMain__navLinkSub__2T3V5" data-ui-name="emblemEditor">Title Editor</a></li>
                    </ul>
                    <div class="NavigationMain__overlay__3SibJ">
                    </div>
                </li>
                <li><a class="NavigationMain__navLink__1xmUY" data-ui-name="jobs" href="/jobs">Jobs</a></li>

                <li><a class="NavigationMain__navLink__1xmUY" data-ui-name="photos" href="/photos">Photos</a></li>

                <li><a class="NavigationMain__navLink__1xmUY" data-ui-name="videos" href="/videos">Videos</a></li>

                <li><a href="/events" class="NavigationMain__navLink__1xmUY" data-ui-name="events">Events</a></li>

                <li><a href="#" class="NavigationMain__navLink__1xmUY" data-ui-name="news" target="_blank">News</a></li>
            </ul>
            <div class="NavigationTop__groupLeft__3lTQW">
                <a href="#" class="NavigationTop__icon__32Kg3 NavigationTop__hamburger__KU-ur">
                    <span class="NavigationTop__iconBg__3nlrW">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" height="16" width="16" class="UI__Icon__icon"><path d="M24.8 10.6H7.3c-.8 0-1.4-.6-1.4-1.4 0-.8.6-1.4 1.4-1.4h17.5c.8 0 1.4.6 1.4 1.4 0 .8-.6 1.4-1.4 1.4zM24.9 17.3H7.4c-.8 0-1.4-.6-1.4-1.4s.6-1.4 1.4-1.4h17.5c.8 0 1.4.6 1.4 1.4s-.7 1.4-1.4 1.4zM24.9 24H7.4c-.8 0-1.4-.6-1.4-1.4s.6-1.4 1.4-1.4h17.5c.8 0 1.4.6 1.4 1.4s-.7 1.4-1.4 1.4z"></path><path d="M25.1 32H3.3C1.5 32 0 30.5 0 28.7V3.3C0 1.5 1.5 0 3.3 0h25.3C30.5 0 32 1.5 32 3.3v21.9c0 .8-.6 1.4-1.4 1.4-.8 0-1.4-.6-1.4-1.4V3.3c0-.3-.3-.6-.6-.6H3.3c-.3 0-.6.3-.6.6v25.3c0 .3.3.6.6.6h21.8c.8 0 1.4.6 1.4 1.4 0 .8-.6 1.4-1.4 1.4z"></path></svg></span></a><ul class="NavigationTop__nav__1InFQ NavigationTop__navSignedOut__2qibz">

                            <li><a href="#" class="NavigationTop__navLink__k_LuP" data-ui-name="signIn">Sign In</a></li>

                            <li><a href="#" class="NavigationTop__navLink__k_LuP NavigationTop__navLinkHighlight__2uEEp" data-ui-name="signUp">Sign Up</a></li>
                        </ul>
                        <a href="#" class="NavigationTop__icon__32Kg3 NavigationTop__search__UDzfT" data-ui-name="scSearch"><span class="NavigationTop__iconBg__3nlrW"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" height="16" width="16" class="UI__Icon__icon"><path d="M30.5 32c-.4 0-.8-.1-1.1-.4l-9.3-9.3c-.6-.6-.6-1.5 0-2.1 3.9-4 3.9-10.3 0-14.2-1.9-1.9-4.4-3-7.1-3-2.6 0-5.1 1.1-7 3-3.9 3.9-3.9 10.2 0 14.1 2.4 2.4 5.7 3.4 9 2.7.8-.1 1.6.4 1.8 1.2.2.8-.4 1.6-1.2 1.8-4.3.8-8.7-.5-11.7-3.6-5.1-5.1-5.1-13.4 0-18.5C6.3 1.4 9.6 0 13 0c3.5 0 6.8 1.4 9.2 3.8 4.7 4.7 5.1 12.2 1 17.3l8.3 8.3c.6.6.6 1.5 0 2.1-.2.4-.6.5-1 .5z"></path></svg></span></a>
                    </div>
                    <a class="NavigationTop__logo__3GmAs" data-ui-name="logo" href="/">
                        <div class="NavigationTop__logoRockstar__1m1Ou">
                        </div>
                        <div class="NavigationTop__logoSocialClub__1EfPy">
                        </div>
                    </a>
                    <div class="NavigationTop__groupRight__3UIqi"><span class="NavigationTop__navPlayer__2TGn7"><a href="#" class="NavigationTop__icon__32Kg3" data-ui-name="info"><span class="NavigationTop__iconBg__3nlrW">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" height="16" width="16" class="UI__Icon__icon"><path d="M15.6 32s-.1 0 0 0h-.8c-2.7 0-5.6 0-8.4-.8-3-.9-4.6-2.4-4.7-4.7-.1-1.1.3-2.2 1-3.1 1.1-1.5 2.7-2.4 4.1-3.1.5-.3 1-.5 1.5-.8.6-.4 2-1.4 2.1-2.7 0-.6-.2-1.3-.8-2.1l-.6-.9c-.4-.6-.8-1.2-1.2-1.9-1.2-2.5-1-5.6.4-7.9.2-.3.4-.6.7-.9 1.8-2 4.3-3.1 7-3.1 2.7-.1 5.3 1.1 7.2 3 .3.3.6.7.8 1 1.4 2.3 1.5 5.4.3 7.9-.4.7-.8 1.3-1.2 1.9l-.6.9c-.5.8-.8 1.5-.8 2.1.1 1.3 1.5 2.3 2.1 2.7.5.3 1 .6 1.5.8 1.4.7 3 1.5 4.1 3.1.7.9 1 2.1 1 3.1-.1 2.2-1.7 3.8-4.7 4.7-.7.2-1.4.3-2 .5-.7.1-1.5-.4-1.6-1.1-.1-.7.4-1.5 1.1-1.6.6-.1 1.2-.2 1.7-.4 2.4-.7 2.7-1.5 2.7-2.2 0-.5-.1-.9-.5-1.4-.7-1-1.9-1.6-3.1-2.3-.6-.3-1.1-.6-1.7-.9-2.1-1.3-3.3-3-3.4-4.9-.1-1.2.3-2.4 1.2-3.8.2-.3.4-.7.7-1 .4-.5.7-1 1-1.5.8-1.6.7-3.6-.2-5.2-.1-.1-.2-.2-.4-.5-1.3-1.4-3.2-2.2-5.2-2.2-1.9 0-3.7.8-5 2.2-.2.2-.3.4-.4.5-.9 1.6-1 3.6-.2 5.2.3.5.6 1 1 1.5.2.3.5.6.7 1 .9 1.3 1.3 2.6 1.2 3.8-.1 1.9-1.3 3.6-3.4 4.9-.5.3-1.1.6-1.7.9C6.9 23.4 5.7 24 5 25c-.3.4-.5.9-.5 1.4 0 .7.4 1.5 2.7 2.2 2.4.7 4.9.7 7.6.7h.8c.4 0 .8.2 1 .5.3.3.4.7.3 1.1 0 .6-.6 1.1-1.3 1.1z"></path></svg></span></a>
                        <div class="NavigationPlayer__nav__1GtYE NavigationPlayer__navOpen__kmIqC"><ul class="NavigationPlayer__navSub__SIRkf"><li class="NavigationPlayer__signUp__2AOMK"><a href="https://signin.rockstargames.com/create/?cid=socialclub&amp;lang=en-US&amp;returnUrl=%2F" class="NavigationPlayer__navLink__2oeuj NavigationPlayer__highlight__2lzxA" data-ui-name="signUp">Sign Up</a></li>

                            <li class="NavigationPlayer__signIn__3qaVH"><a href="#" class="NavigationPlayer__navLink__2oeuj" data-ui-name="signIn">Sign In</a></li><li><a href="#" class="NavigationPlayer__navLink__2oeuj" data-ui-name="legal">Legal</a></li><li><a href="#" class="NavigationPlayer__navLink__2oeuj" data-ui-name="privacy">Privacy</a></li>

                            <li><a href="#" class="NavigationPlayer__navLink__2oeuj" data-ui-name="support">Support</a></li>

                            <li><a href="#" class="NavigationPlayer__navLink__2oeuj" data-ui-name="cookies">Cookies</a></li>

                            <li><div class="NavigationPlayer__languageWrap__2jmcz">
                                <div class="UI__DropDown__custom-select LanguageSelector__dropdown__2uNdg">
                                    <select class="select" data-ui-name="languageSelector">
                                        <option value="de-DE">Deutsch</option>
                                        <option value="en-US">English</option>
                                        <option value="es-ES">Español</option>
                                        <option value="es-MX">Español Latinoamérica</option>
                                        <option value="fr-FR">Français</option>
                                        <option value="it-IT">Italiano</option>
                                        <option value="ja-JP">日本語</option>
                                        <option value="ko-KR">한국어</option>
                                        <option value="pl-PL">Polski</option>
                                        <option value="pt-BR">Português do Brasil</option>
                                        <option value="ru-RU">Русский</option>
                                        <option value="zh-TW">繁體中文</option>
                                        <option value="zh-CN">简体中文</option>
                                    </select>
                                </div>

下面的更新代码：

<div class="dropdown">
                    <div class="NavigationTop__groupRight__3UIqi"><span class="NavigationTop__navPlayer__2TGn7"><a onclick="myFunction()" href="#" class="NavigationTop__icon__32Kg3" data-ui-name="info"><span class="NavigationTop__iconBg__3nlrW" class="dropbtn">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" height="16" width="16" class="UI__Icon__icon"><path d="M15.6 32s-.1 0 0 0h-.8c-2.7 0-5.6 0-8.4-.8-3-.9-4.6-2.4-4.7-4.7-.1-1.1.3-2.2 1-3.1 1.1-1.5 2.7-2.4 4.1-3.1.5-.3 1-.5 1.5-.8.6-.4 2-1.4 2.1-2.7 0-.6-.2-1.3-.8-2.1l-.6-.9c-.4-.6-.8-1.2-1.2-1.9-1.2-2.5-1-5.6.4-7.9.2-.3.4-.6.7-.9 1.8-2 4.3-3.1 7-3.1 2.7-.1 5.3 1.1 7.2 3 .3.3.6.7.8 1 1.4 2.3 1.5 5.4.3 7.9-.4.7-.8 1.3-1.2 1.9l-.6.9c-.5.8-.8 1.5-.8 2.1.1 1.3 1.5 2.3 2.1 2.7.5.3 1 .6 1.5.8 1.4.7 3 1.5 4.1 3.1.7.9 1 2.1 1 3.1-.1 2.2-1.7 3.8-4.7 4.7-.7.2-1.4.3-2 .5-.7.1-1.5-.4-1.6-1.1-.1-.7.4-1.5 1.1-1.6.6-.1 1.2-.2 1.7-.4 2.4-.7 2.7-1.5 2.7-2.2 0-.5-.1-.9-.5-1.4-.7-1-1.9-1.6-3.1-2.3-.6-.3-1.1-.6-1.7-.9-2.1-1.3-3.3-3-3.4-4.9-.1-1.2.3-2.4 1.2-3.8.2-.3.4-.7.7-1 .4-.5.7-1 1-1.5.8-1.6.7-3.6-.2-5.2-.1-.1-.2-.2-.4-.5-1.3-1.4-3.2-2.2-5.2-2.2-1.9 0-3.7.8-5 2.2-.2.2-.3.4-.4.5-.9 1.6-1 3.6-.2 5.2.3.5.6 1 1 1.5.2.3.5.6.7 1 .9 1.3 1.3 2.6 1.2 3.8-.1 1.9-1.3 3.6-3.4 4.9-.5.3-1.1.6-1.7.9C6.9 23.4 5.7 24 5 25c-.3.4-.5.9-.5 1.4 0 .7.4 1.5 2.7 2.2 2.4.7 4.9.7 7.6.7h.8c.4 0 .8.2 1 .5.3.3.4.7.3 1.1 0 .6-.6 1.1-1.3 1.1z"></path></svg></span></a>
                        <div class="NavigationPlayer__nav__1GtYE NavigationPlayer__navOpen__kmIqC"><ul class="NavigationPlayer__navSub__SIRkf"><li class="NavigationPlayer__signUp__2AOMK"><a href="https://signin.rockstargames.com/create/?cid=socialclub&amp;lang=en-US&amp;returnUrl=%2F" class="NavigationPlayer__navLink__2oeuj NavigationPlayer__highlight__2lzxA" data-ui-name="signUp">Sign Up</a></li>

                            <li class="NavigationPlayer__signIn__3qaVH"><a href="https://signin.rockstargames.com/connect/authorize/socialclub?lang=en-US&amp;returnUrl=%2F" class="NavigationPlayer__navLink__2oeuj" data-ui-name="signIn">Sign In</a></li>
                            <div id="myDropdown" class="dropdown-content"
                            <li><a href="https://www.rockstargames.com/legal" class="NavigationPlayer__navLink__2oeuj" data-ui-name="legal">Legal</a></li>

                            <li><a href="https://www.rockstargames.com/privacy" class="NavigationPlayer__navLink__2oeuj" data-ui-name="privacy">Privacy</a></li>

                            <li><a href="#" class="NavigationPlayer__navLink__2oeuj" data-ui-name="support">Support</a></li>

                            <li><a href="#" class="NavigationPlayer__navLink__2oeuj" data-ui-name="cookies">Cookies</a></li>

                            <li><div class="NavigationPlayer__languageWrap__2jmcz">
                                <div class="UI__DropDown__custom-select LanguageSelector__dropdown__2uNdg">
                                    <select class="select" data-ui-name="languageSelector">
                                        <option value="de-DE">Deutsch</option>
                                        <option value="en-US">English</option>
                                        <option value="es-ES">Español</option>
                                        <option value="es-MX">Español Latinoamérica</option>
                                        <option value="fr-FR">Français</option>
                                        <option value="it-IT">Italiano</option>
                                        <option value="ja-JP">日本語</option>
                                        <option value="ko-KR">한국어</option>
                                        <option value="pl-PL">Polski</option>
                                        <option value="pt-BR">Português do Brasil</option>
                                        <option value="ru-RU">Русский</option>
                                        <option value="zh-TW">繁體中文</option>
                                        <option value="zh-CN">简体中文</option>
                                    </select>
                                </div>
                                <script>
/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */
function myFunction() {
  document.getElementById("dropdown").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}
</script>

任何帮助表示感谢，并预先感谢

Answer 1

您只需删除“ show”类，但这不足以再次隐藏该元素。

创建另一个名为“ hide”的CSS类，该类执行`display：none'，然后在删除show类时，在其后添加hide类。

下拉菜单按钮保持打开状态，不会关闭

1 个答案: