There seems to be an issue with my content editor web part wherein the menu, which is clickable and hoverable due to the jQuery installed, is causing some unexpected behavior. Whenever the menu is clicked or hovered over, it changes the content in the adjacent div within the same content editor web part. This content change involves removing and adding different classes - one for hiding and another for displaying. However, after a couple of uses, the menu ends up accumulating unnecessary code attached to it, like this:
<div id="heading-3" jquery1316195534303="3" jquery1316195730747="3">
Although the functionality works fine both with and without this additional code, I am concerned about its implications once the site goes live. My CSS and jQuery codes are straightforward:
CSS
#rotatorBlocks .non-active {
display: none;
}
#rotatorBlocks .active {
display: block;
}
JQuery
$(function() {
var current;
function rotate() {
var currentSplit = current.split("-");
var num = currentSplit[currentSplit.length - 1];
$("#rotatorBlocks .active").removeClass("active").addClass("non-active");
$("#block-" + num).addClass("active");
}
var hoverOrClick = function () {
current = this.id.substr(6);
rotate();
}
$('#rotatorHeadings div').click(hoverOrClick).hover(hoverOrClick);
});