更改CSS以使用jQuery切换

Question

Weave: http://kodeweave.sourceforge.net/editor/#e3d0eadc38078efe27c7785d6e4a6e1a

I'm having a floating action button (material design style) on my site. Currently it is triggered by the :hover property and plain CSS. I want to change it to open on click and was planning to use the toggle function of jQuery.

I'm trying to replicate the menu from mydivision.net (bottom right corner)

 $(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> 

I thought I could use the following jQuery script:

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

Now the question is: How do I have to amend the existing CSS so that the new class "active" is opening the menu on click?

Thanks!

Answer 1

Weave: http://kodeweave.sourceforge.net/editor/#e884e37313af26b5738f11b2446bfb20

The menu opens from :hover . If you use the :active pseudo selector you will have to hold your mouse down for the menu to be open (In short :active is basically a mousedown / touchstart event in CSS)

You don't actually need JQuery for this effect! You could open/close the menu using a checkbox or the :target pseudo selector .

I chose to use a checkbox in my snippet below.

I removed some of the vendor prefixes in your CSS and replaced it with Prefix-Free to keep your code 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

This line is where the party's at .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;}

So you need to change fab:hover to fab.active on this line and wherever else it occurs.