I am trying to add class to mainmenu div, but for some reason it add class to both the div, the div has same class, i only wanted to add class to selected div.
<div class="main-column">
<div id="col1">
<div class="hidden">hidden text</div>
</div>
<div id="col2" class="class">
<div class="menubox">
<a class="toggleClass">toggleClass</a>
<a class="toggleClass">toggleClass</a>
<a class="toggleClass">toggleClass</a>
</div>
<div class="menubox">
<a class="toggleClass">toggleClass</a>
<a class="toggleClass">toggleClass</a>
<a class="toggleClass">toggleClass</a>
</div>
</div>
<div id="col3" class="class">
<div class="mainmenu">
<div class="menubox">
<a class="toggleClass">toggleClass</a>
<a class="toggleClass">toggleClass</a>
<a class="toggleClass">toggleClass</a>
</div>
</div>
<div class="mainmenu">
<div class="menubox">
<a class="toggleClass">toggleClass</a>
<a class="toggleClass">toggleClass</a>
<a class="toggleClass">toggleClass</a>
</div>
</div>
</div>
</div>
This is my JQUERY code.
(function($) {
$(document).ready(function() {
$('.menubox .toggleClass').hover(function() {
// fade in the div in this object.
$(this).closest('.main-column').find('.class .mainmenu').toggleClass('class_name');
});
});
}(jQuery));
I think you might want something like:
(function($) {
$( document ).ready( function() {
$('.menubox .toggleClass').hover(function () {
var mine. = $(this).closest('.mainmenu');
$(this).closest('.main-column').find('.mainmenu').not( mine ).removeClass('class_name');
mine.addClass('class_name');
});
});
}(jQuery));
Working Demo: https://dojo.telerik.com/IJoBeCeT/2
(function($) {
$(document).ready(function() {
$('.menubox .toggleClass').hover(function() {
// fade in the div in this object.
$(this).parents('.mainmenu').toggleClass('class_name');
});
});
}(jQuery));.class_name {
color: red;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main-column">
<div id="col1">
<div class="hidden">hidden text</div>
</div>
<div id="col2" class="class">
<div class="menubox">
<a class="toggleClass">toggleClass</a>
<a class="toggleClass">toggleClass</a>
<a class="toggleClass">toggleClass</a>
</div>
<div class="menubox">
<a class="toggleClass">toggleClass</a>
<a class="toggleClass">toggleClass</a>
<a class="toggleClass">toggleClass</a>
</div>
</div>
<div id="col3" class="class">
<div class="mainmenu">
<div class="menubox">
<a class="toggleClass">toggleClass</a>
<a class="toggleClass">toggleClass</a>
<a class="toggleClass">toggleClass</a>
</div>
</div>
<div class="mainmenu">
<div class="menubox">
<a class="toggleClass">toggleClass</a>
<a class="toggleClass">toggleClass</a>
<a class="toggleClass">toggleClass</a>
</div>
</div>
</div>
</div>