如何隱藏項目單擊純CSS窗體下拉菜單中的菜單

Question

我有以下用於CSS下拉列表的代碼（從這里獲得： https : //codepen.io/qwertie/pen/QBYMdZ ）：

HTML

  <div class="dropdown">
    <span tabindex="0"><span class="active_value">&nbsp;dropdown menu <i class='fas fa-caret-down fa-lg'></i></span></span>
    <div class="dropdownmenu">
        <ul>
      <li class="cb-item"><a href="http://test.net">home page</a></li>
      <li class="cb-item"><a href="http://test2.net">page</a></li>
      <li class="cb-item"><a href="#">Stay on this page</a></li>
      <li class="cb-item"><a href="#">Stay on this page</a></li>
      <li class="cb-item"><a href="#">Stay on this page</a></li>
      <li class="cb-item"><a href="#">Stay on this page</a></li>
      <li class="cb-item"><a href="#">Stay on this page</a></li>
      <li class="cb-item"><a href="#">Stay on this page</a></li>
      <li class="cb-item"><a href="#">fd gddsfgpage</a></li>
      <li class="cb-item"><a href="#">457567456756 757this page</a></li>
      <li class="cb-item"><a href="#">Stay on this page</a></li>
            </ul>
    </div>
  </div>

CSS

.dropdown {
    /* "relative" and "inline-block" (or just "block") are needed
     here so that "absolute" works correctly in children */
    position: relative;
    display: inline-block;
    width: 100%;
    height: 30px;
}

.dropdownmenu {
    background-color: #FFF !important;
    width: max-content;
    width: -moz-max-content;
    width: -webkit-max-content;
    width: -o-max-content;
    max-height: 200px;
    background-color: rgb(255, 255, 255);
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    z-index: 10;
    overflow-y: scroll !important;
    overflow-x: hidden !important;
    border-width: 0px 1px 1px;
    border-style: solid solid solid;
    border-color: rgb(220, 220, 220) rgb(220, 220, 220) rgb(220, 220, 220);
}

span.active_value {
    padding: 6px 0px 6px 0px;
    width: 100%;
    position: absolute;
    background-color: #FFF;
    border: 1px solid #CECECE;
    cursor:pointer;
}

.dropdown i.fa-caret-down {
    position: absolute;
    right: 10px;
}

.dropdownmenu a {
    text-decoration: none;
    color: darkslategray;
}
.cb-item {
    display: block;
    margin: 0px;
    padding: 2px;
}

.cb-item:hover, .cb-item:hover > a {
    color: #fff !important;
    background-color: #006494;
    cursor: pointer;
}



    .dropdown > *:last-child {
        /* Using `display:block` here has two desirable effects:
     (1) Accessibility: it lets input widgets in the dropdown to
         be selected with the tab key when the dropdown is closed. 
     (2) It lets the opacity transition work.
     But it also makes the contents visible, which is undesirable 
     before the list drops down. To compensate, use `opacity: 0`
     and disable mouse pointer events. Another side effect is that
     the user can select and copy the contents of the hidden list,
     but don't worry, the selected content is invisible. */
        display: block;
        opacity: 0;
        pointer-events: none;
        transition: 0.4s; /* fade out */
        position: absolute;
        left: 0;
        top: 100%;
        border: 1px solid #888;
        background-color: #fff;
        box-shadow: 1px 2px 4px 1px #666;
        box-shadow: 1px 2px 4px 1px #4448;
        z-index: 9999;
        min-width: 100%;
        box-sizing: border-box;
    }
    /* List of situations in which to show the dropdown list.
   - Focus dropdown or non-last child of it => show last-child
   - Stay open for focus in last child, unless .dropdownmenu
   - .sticky last child stays open on hover
   - .dropdownmenu stays open on hover, ignores focus in last-child */
.dropdown:focus > *:last-child,
.dropdown > *:focus ~ *:last-child,
.dropdown > .dropdownmenu:last-child:hover {
    display: block;
    opacity: 1;
    transition: 0.15s;
    pointer-events: auto;
}
/* detect Edge/IE and behave if though dropdownmenu is on for all
   dropdowns (otherwise links won't be clickable) */
@supports (-ms-ime-align:auto) {
    .dropdown > *:last-child:hover {
        display: block;
        opacity: 1;
        pointer-events: auto;
    }
}
/* detect IE and do the same thing. */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .dropdown > *:last-child:hover {
        display: block;
        opacity: 1;
        pointer-events: auto;
    }
}

.dropdown:not(.sticky) > *:not(:last-child):focus,
.dropdown:focus {
    pointer-events: none; /* Causes second click to close */
}

現在要做的是，當我從下拉列表中單擊一個項目時，我會觸發以下代碼：

$(document).on('click', '.dropdown .dropdownmenu', function () {
    $(".dropdownmenu").hide("fast");
});
$(document).on('click', '.dropdown .dropdownmenu', function () {
    $(".dropdownmenu").show("fast");
});

但是此代碼可能有點兒狡猾，因為有時隱藏菜單時，由於鼠標懸停在列表中的某個項目上，因此它會閃爍一下。 我認為這是因為我的jQuery方法在隱藏菜單時以其他/其他方式隱藏菜單，這可能與CSS的隱藏/顯示菜單方式沖突。

我以為現有的CSS代碼正在使用opacity來顯示/隱藏菜單，但據我所知，該值不會改變。

如何以基本功能正常運行的方式隱藏項目單擊上的菜單？

Answer 1

說明

但是此代碼可能有點兒狡猾，因為有時隱藏菜單時，由於鼠標懸停在列表中的某個項目上，因此它會閃爍一下。 我認為這是因為我的jQuery方法在隱藏菜單時以其他/其他方式隱藏菜單，這可能與CSS的隱藏/顯示菜單方式沖突。

不完全是。 您因為告訴jQuery要做什么而發生沖突。 看一下您的代碼：

$(document).on('click', '.dropdown .dropdownmenu', function () {
    $(".dropdownmenu").hide("fast");
});
$(document).on('click', '.dropdown .dropdownmenu', function () {
    $(".dropdownmenu").show("fast");
});

單擊時，有兩件事應該發生：

• $(".dropdownmenu").show("fast");
• $(".dropdownmenu").hide("fast");

我們可以對此進行總結，以使問題更加明顯：

$(document).on('click', '.dropdown .dropdownmenu', function () {
    $(".dropdownmenu").hide("fast");
    $(".dropdownmenu").show("fast");
});

您的代碼要做的是無論下拉列表的狀態如何， 每次執行時都要執行這兩個功能。

---

解

由於您的下拉菜單確實顯示了沒有JS的菜單，因此您不需要它，因此讓我們將其刪除。

$(document).on('click', '.dropdown .dropdownmenu', function() {
  $(".dropdownmenu").hide("fast");
});

問題是：jQuery通過在動畫之后將display: none應用於style屬性，jQuery將使用不同的隱藏方法（這不是閃爍的原因！），因此只能使用一次。 CSS用來隱藏/顯示菜單的作用是使用opacity: 0使菜單不可見，這會使菜單更加復雜。 為了解決這個問題，我刪除了兩個小的CSS塊並將jQuery更改為：

 $('.active_value').on('click', () => { $(".dropdownmenu").toggleClass('opened'); }); $(document).mouseup(function(e) { if (!$('.active_value').is(e.target)) { $(".dropdownmenu").removeClass('opened'); } }); 

 .dropdown { /* "relative" and "inline-block" (or just "block") are needed here so that "absolute" works correctly in children */ position: relative; display: inline-block; width: 100%; height: 30px; } .dropdownmenu { background-color: #FFF !important; width: max-content; width: -moz-max-content; width: -webkit-max-content; width: -o-max-content; max-height: 200px; background-color: rgb(255, 255, 255); border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; z-index: 10; overflow-y: scroll !important; overflow-x: hidden !important; border-width: 0px 1px 1px; border-style: solid solid solid; border-color: rgb(220, 220, 220) rgb(220, 220, 220) rgb(220, 220, 220); } span.active_value { padding: 6px 0px 6px 0px; width: 100%; position: absolute; background-color: #FFF; border: 1px solid #CECECE; cursor: pointer; } .dropdown i.fa-caret-down { position: absolute; right: 10px; } .dropdownmenu a { text-decoration: none; color: darkslategray; } .cb-item { display: block; margin: 0px; padding: 2px; } .cb-item:hover, .cb-item:hover>a { color: #fff !important; background-color: #006494; cursor: pointer; } .dropdown>*:last-child { /* Using `display:block` here has two desirable effects: (1) Accessibility: it lets input widgets in the dropdown to be selected with the tab key when the dropdown is closed. (2) It lets the opacity transition work. But it also makes the contents visible, which is undesirable before the list drops down. To compensate, use `opacity: 0` and disable mouse pointer events. Another side effect is that the user can select and copy the contents of the hidden list, but don't worry, the selected content is invisible. */ display: block; opacity: 0; pointer-events: none; transition: 0.4s; /* fade out */ position: absolute; left: 0; top: 100%; border: 1px solid #888; background-color: #fff; box-shadow: 1px 2px 4px 1px #666; box-shadow: 1px 2px 4px 1px #4448; z-index: 9999; min-width: 100%; box-sizing: border-box; } /* List of situations in which to show the dropdown list. - Focus dropdown or non-last child of it => show last-child - Stay open for focus in last child, unless .dropdownmenu - .sticky last child stays open on hover - .dropdownmenu stays open on hover, ignores focus in last-child */ /* detect Edge/IE and behave if though dropdownmenu is on for all dropdowns (otherwise links won't be clickable) */ @supports (-ms-ime-align:auto) { .dropdown>*:last-child:hover { display: block; opacity: 1; pointer-events: auto; } } /* detect IE and do the same thing. */ @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .dropdown>*:last-child:hover { display: block; opacity: 1; pointer-events: auto; } } .dropdownmenu.opened { display: block; opacity: 1; transition: 0.15s; pointer-events: auto; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="dropdown"> <span tabindex="0"><span class="active_value">&nbsp;dropdown menu <i class='fas fa-caret-down fa-lg'></i></span></span> <div class="dropdownmenu"> <ul> <li class="cb-item"><a href="http://test.net">home page</a></li> <li class="cb-item"><a href="http://test2.net">page</a></li> <li class="cb-item"><a href="#">Stay on this page</a></li> <li class="cb-item"><a href="#">Stay on this page</a></li> <li class="cb-item"><a href="#">Stay on this page</a></li> <li class="cb-item"><a href="#">Stay on this page</a></li> <li class="cb-item"><a href="#">Stay on this page</a></li> <li class="cb-item"><a href="#">Stay on this page</a></li> <li class="cb-item"><a href="#">fd gddsfgpage</a></li> <li class="cb-item"><a href="#">457567456756 757this page</a></li> <li class="cb-item"><a href="#">Stay on this page</a></li> </ul> </div> </div> 

我使用了另一種方法，其中完全刪除了CSS :hover效果，以使用僅JS方法打開/關閉下拉菜單。 如果將CSS和我的CSS進行比較，您會很快發現更改。 我刪除了一個類，並添加了opened類。

另外，請記住，這是許多方法之一，但我選擇了一種。