Estoy tratando de agregar una clase al div del menú principal , pero por alguna razón agrega una clase a ambos div, el div tiene la misma clase, solo quería agregar una clase al div seleccionado.
<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>Este es mi código JQUERY.
(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));Creo que podrías querer algo como:
(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));Demostración de trabajo: 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>