更改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 。