更改CSS以使用jQuery切換

Question

編織： http : //kodeweave.sourceforge.net/editor/#e3d0eadc38078efe27c7785d6e4a6e1a

我的網站上有一個浮動操作按鈕（材料設計樣式）。 當前，它是由：hover屬性和普通CSS觸發的。 我想將其更改為在單擊時打開，並打算使用jQuery的切換功能。

我正在嘗試從mydivision.net （右下角）復制菜單

 $(document).ready(function() { $("span#fab").click(function () { $(this).toggleClass("active"); }); }); 

 .fab { position: fixed; bottom: 32px; right: 32px; z-index: 10; } .fab-button { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28); border-radius: 50%; display: block; width: 56px; height: 56px; margin: 20px auto 0; position: relative; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; text-align: center; } .fab-button:active, .fab-button:focus, .fab-button:hover { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.56); } .fab-button:not(:last-child) { width: 42px; height: 42px; margin: 10px auto 0; opacity: 0; -webkit-transform: translateY(50px) scale(0.2); transform: translateY(50px) scale(0.2); } .fab:hover .fab-button:not(:last-child) { opacity: 1; -webkit-transform: none; transform: none; margin: 15px auto 0; } .fab-button i { color: #fff; font-size: 21px; text-align: center; line-height: 42px; } .fab-button:nth-last-child(1) i { line-height: 56px; } .fab-button:nth-last-child(1) { -webkit-transition-delay: 25ms; transition-delay: 25ms; background-color: #ff6d10; cursor: pointer; } .fab-button:not(:last-child):nth-last-child(2) { -webkit-transition-delay: 50ms; transition-delay: 50ms; background-color: #78c831; } .fab-button:not(:last-child):nth-last-child(3) { -webkit-transition-delay: 75ms; transition-delay: 75ms; background-color: #3f73fc; } .fab-button:not(:last-child):nth-last-child(4) { -webkit-transition-delay: 100ms; transition-delay: 100ms; background-color: #6d5593; } .fab-button:not(:last-child):nth-last-child(5) { -webkit-transition-delay: 125ms; transition-delay: 125ms; background-color: #f8ba24; } .fab-button:not(:last-child):nth-last-child(6) { -webkit-transition-delay: 150ms; transition-delay: 150ms; background-color: #1fc36a; } .fab-button:not(:last-child):nth-last-child(7) { -webkit-transition-delay: 175ms; transition-delay: 175ms; background-color: #242424; } .fab .fab-button:nth-last-child(1) i { -webkit-transition: all 0.2s ease; transition: all 0.2s ease; } .fab:hover .fab-button:nth-last-child(1) i { transform: rotate(-180deg); } [tooltip]:before { position: absolute; bottom: 22%; right: 100%; border-radius: 3px; background-color: #242424; color: #fff; content: attr(tooltip); font-size: 12px; line-height: 1; padding: 5px; margin-right: 10px; white-space: nowrap; visibility: hidden; opacity: 0; } [tooltip]:hover:before, [tooltip]:hover:after { background-color: #000; } .fab:hover [tooltip]:before, .fab:hover [tooltip]:after { visibility: visible; opacity: 1; } 

 <link href="https://necolas.github.io/normalize.css/4.1.1/normalize.css" rel="stylesheet"/> <link href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <nav class="fab"> <a class="fab-button" href="#" tooltip="blaah"><i class="fa fa-angle-double-up"></i></a> <a class="fab-button" href="#" tooltip="blaah"><i class="fa fa-shopping-cart"></i></a> <a class="fab-button" href="#" tooltip="blaah"><i class="fa fa-users"></i></a> <a class="fab-button" href="#" tooltip="blaah"><i class="fa fa-microphone"></i></a> <a class="fab-button" href="#" tooltip="blaah"><i class="fa fa-gavel"></i></a> <a class="fab-button" href="#" tooltip="Forum"><i class="fa fa-comments"></i></a> <span class="fab-button" id="fab"><i class="fa fa-bars"></i></span> </nav> 

我以為可以使用以下jQuery腳本：

jQuery(document).ready(function() {
  jQuery("span#fab").click(function () {
    jQuery(this).toggleClass("active");
  });
});

現在的問題是：如何修改現有的CSS，以便新類“ active”打開單擊菜單？

謝謝！

Answer 1

編織： http : //kodeweave.sourceforge.net/editor/#e884e37313af26b5738f11b2446bfb20

菜單從：hover打開。 如果使用：active偽選擇器，則必須按住鼠標才能打開菜單（簡而言之， ：active 本質上是CSS中的mousedown / touchstart事件）

您實際上不需要JQuery即可達到這種效果！ 您可以使用復選框或：target 偽選擇器打開/關閉菜單。

我選擇在下面的代碼段中使用一個復選框。

我在CSS中刪除了一些供應商前綴，並用Free Prefix-Free代替，以使代碼保持DRY 。

 .fab { position: fixed; bottom: 32px; right: 32px; z-index: 10; } .fab-button { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28); border-radius: 50%; display: block; width: 56px; height: 56px; margin: 20px auto 0; position: relative; transition: all 0.2s ease-out; text-align: center; } #menu:checked, .fab-button:active, .fab-button:hover { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.56); } .fab-button:not(:last-child) { width: 42px; height: 42px; margin: 10px auto 0; opacity: 0; transform: translateY(50px) scale(0.2); } #menu:checked ~ .fab-button:not(:last-child) { opacity: 1; transform: none; margin: 15px auto 0; } .fab-button i { color: #fff; font-size: 21px; text-align: center; line-height: 42px; } .fab-button:nth-last-child(1) i { line-height: 56px; } .fab-button:nth-last-child(1) { transition-delay: 25ms; background: #ff6d10; cursor: pointer; } .fab-button:not(:last-child):nth-last-child(2) { transition-delay: 50ms; background: #78c831; } .fab-button:not(:last-child):nth-last-child(3) { transition-delay: 75ms; background: #3f73fc; } .fab-button:not(:last-child):nth-last-child(4) { transition-delay: 100ms; background: #6d5593; } .fab-button:not(:last-child):nth-last-child(5) { transition-delay: 125ms; background: #f8ba24; } .fab-button:not(:last-child):nth-last-child(6) { transition-delay: 150ms; background: #1fc36a; } .fab-button:not(:last-child):nth-last-child(7) { transition-delay: 175ms; background: #242424; } .fab .fab-button:nth-last-child(1) i { transition: all 0.2s ease; } #menu:checked ~ .fab-button:nth-last-child(1) i { transform: rotate(-180deg); } [tooltip]:before { position: absolute; bottom: 22%; right: 100%; border-radius: 3px; background: #242424; color: #fff; content: attr(tooltip); font-size: 12px; line-height: 1; padding: 5px; margin-right: 10px; white-space: nowrap; visibility: hidden; opacity: 0; } [tooltip]:hover:before, [tooltip]:hover:after { background: #000; } #menu:checked ~ [tooltip]:before, #menu:checked ~ [tooltip]:after { visibility: visible; opacity: 1; } 

 <link href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css" rel="stylesheet"/> <link href="https://necolas.github.io/normalize.css/4.1.1/normalize.css" rel="stylesheet"/> <script src="https://leaverou.github.io/prefixfree/prefixfree.js"></script> <nav class="fab"> <input type="checkbox" id="menu"> <a class="fab-button" href="#" tooltip="blaah"><i class="fa fa-angle-double-up"></i></a> <a class="fab-button" href="#" tooltip="blaah"><i class="fa fa-shopping-cart"></i></a> <a class="fab-button" href="#" tooltip="blaah"><i class="fa fa-users"></i></a> <a class="fab-button" href="#" tooltip="blaah"><i class="fa fa-microphone"></i></a> <a class="fab-button" href="#" tooltip="blaah"><i class="fa fa-gavel"></i></a> <a class="fab-button" href="#" tooltip="Forum"><i class="fa fa-comments"></i></a> <label for="menu" class="fab-button" id="fab"><i class="fa fa-bars"></i></label> </nav> 

Answer 2

此行是聚會方在.fab:hover .fab-button:not(:last-child) {opacity: 1; -webkit-transform: none; transform: none; margin: 15px auto 0;} .fab:hover .fab-button:not(:last-child) {opacity: 1; -webkit-transform: none; transform: none; margin: 15px auto 0;}

因此，您需要在此行以及其他發生的位置將fab:hover更改為fab.active 。