jQuery的HTML數據效果

Question

我目前在“導航”菜單中使用此HTML代碼段。 標簽中的data-effect屬性（data-effect =“ st-effect-12”）激活轉換以打開導航菜單。

我想將其更改為jQuery。 因此jQuery將處理點擊。 然后將切換st-effect-id CSS元素。

我嘗試了ToggleClass參數，但無法正常工作。

謝謝哈利！

 .st-effect-12.st-container { -webkit-perspective: 1500px; perspective: 1500px; } .st-effect-12 .st-pusher { -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .st-effect-12.st-menu-open .st-pusher { -webkit-transform: rotateY(-10deg); transform: rotateY(-10deg); } .st-effect-12.st-menu { opacity: 1; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } .st-effect-12.st-menu-open .st-effect-12.st-menu { visibility: visible; -webkit-transition: -webkit-transform 0.5s; transition: transform 0.5s; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .st-effect-12.st-menu::after { display: none; } 

 <button data-effect="st-effect-12" style="left: 0px; top: 0px;"><i class="fa fa-bars fa-2x"></i> </button> 

先感謝您！

Answer 1

這是使用toggleClass的基本實現：

 $('button').on('click', function () { var button = $(this); button.toggleClass(button.data('effect')); }); 

 button { left: 0px; top: 0px; height: 56px; } button.st-effect-12 { background: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <button data-effect="st-effect-12"><i class="fa fa-bars fa-2x"></i> </button> 

Answer 2

好吧，在您的情況下，您應該對jquery使用id或class

HTML

 <button data-effect="st-effect-12" style="left: 0px; top: 0px; height: 56px;"><i class="fa fa-bars fa-2x" id="clickme"></i></button>

CSS

 .activate{
   background-color:red;
 }

JS

$('#clickme).click(function(){
 $(this).addClass('activate');
},function(){
 $(this).removeClass('activate');
});

我現在無法測試，但可能適合您。