2016-08-05 50 views
0

我想觸發的動畫李順序導航添加類上的每個I切換類開放式菜單如何觸發一個函數當一個類被添加和刪除

//this is my script 

$(document).ready(function() { 
document.querySelector("#nav-toggle") 
.addEventListener("click", function() { 
this.classList.toggle("active"); 
$(".menu-wrapper").toggleClass("show-menu"); 
}); // menu toggle class function 
}); //add class for menu 

var addClassToEl = function($el) { 
$el.addClass('nav-reveals'); // addclass sequentially to nav elements 
}; 

$('.side-menu li').each(function(i, el) { 
setTimeout(function() {addClassToEl($(el))}, i++ * 200); 
//set delay for each elements 
}); 
+0

檢查此鏈接 http://stackoverflow.com/questions/19401633/how-to-fire-an-event -on-class-change-using-jquery –

+0

我已經試過了。它不適合我 –

回答

0

你將不得不時間的函數觀看DOM節點的變化。有一個名爲MutationObserver的API,但它看起來對它的支持非常有限。 解決此問題的一種方法是讓修改data-select-content-val屬性的代碼的一部分派發一個您可以收聽的事件。

例如,請參閱:http://jsbin.com/arucuc/3/edit關於如何將它們連接在一起。

代碼在這裏是

$(function() { 
     // Here you register for the event and do whatever you need to do. 
     $(document).on('data-attribute-changed', function() { 
     var data = $('#contains-data').data('mydata'); 
     alert('Data changed to: ' + data); 
     }); 

     $('#button').click(function() { 
     $('#contains-data').data('mydata', 'foo'); 
     // Whenever you change the attribute you will user the .trigger 
     // method. The name of the event is arbitrary 
     $(document).trigger('data-attribute-changed'); 
     }); 

     $('#getbutton').click(function() { 
     var data = $('#contains-data').data('mydata'); 
     alert('Data is: ' + data); 
     }); 
    }); 
0

檢查此鏈接http://jsbin.com/foqajanoya/edit?html,js,output

$('button').on('click',function(e) { 
    //do something 
    var $inp=$("input"); 
    var $val= $("input").val(); 
    $inp.attr('class',$val); 
    if($inp.hasClass('active')){ 
    alert(' is active: Show Menu'); 
    } 
}); 


<!DOCTYPE html> 
<html> 
<head> 
<script src="https://code.jquery.com/jquery-2.2.4.js"></script> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
    <title>JS Bin</title> 
</head> 
<body> 
    <input class="sac"/><button>OK</button> 
</body> 
</html> 
相關問題