Using jQuery or MutationObserver to change CSS of element when another CSS change is detected

Question

I have a collapsible menu that has the following class when closed:

<div class="menu one collapse">

And the following class when opened:

<div class="menu one in collapse">

I want to use the MutationObserver or jQuery to monitor the collapsible menu class and change the following from

<div class="monitored-class three" style="display: block;">

to

<div class="monitored-class three" style="display: none!important;">

When the menu is open, and to revert the changes when the menu is closed.

I have been searching for the past hour for this and the closest I have come is JQuery Detect class changes but the suggested answer right at the bottom:

var mut = new MutationObserver(function(mutations, mut){
  // if attribute changed === 'class' && 'open' has been added, add css to 'otherDiv'
});
mut.observer(document.querySelector(".slide-out-div"),{
  'attributes': true
});

Does not have enough details and code for me to proceed. There is also a more comprehensive answer here:

https://stackoverflow.com/a/14570614/5619682

But it does not directly address what I need to do.

I'm thankful for any help! :)

That's an X/Y problem, you should be just hooking in to whatever is opening and closing the menu, not using observers to check for class change. Also, as the class does change, you can just use CSS for this, `!important` in an external stylesheet will override the inline style anyway. — adeneo, Feb 18 '16 at 14:47
Menu class change is caused by the theme I'm using so I'm not able to directly hook into it, and CSS is not able to respond dynamically depending on whether a class is present or not — David Z, Feb 18 '16 at 14:48
There's probably event handlers available, or something else you can look for, like just attaching your own event handlers etc. — adeneo, Feb 18 '16 at 14:49

score 0 · Answer 1 · answered Feb 18 '16 at 15:37

There is acctually one way to handle this with CSS only, but it will work only if the DOM Elements are listed in a hirarchie.

You can trigger specific CSS Styles by setting up the wrapper CSS classes which will modify the Style in the Child Elements you want.

As an easy Example I will show you this Example. It triggers the Menu Navigations though the Menu Class body.menu-open. The Menu appears only if the class "menu-open" has been added to the body. As the Body is the Major Element of all your Elements you can go in your CSS now and trigger your prefed "menu-open Style" with body.menu-open { .... }

I hope this will give you an Idea of CSS Animation and Triggering (or how is this called correctly?). I think something equivalent to this is your solution.

// Trigger Menus Toggle though CSS
$(document).on('click', '.magic_button', function(){
    $('body').toggleClass('menu-open');
});

/* Global Hardreset */
* { padding:0px; margin:0px; }


/* Menu Wrapper */
.menu_wrapper { 
  display:block; height:50px; background:rgba(0,0,0,.3); position:relative; overflow:hidden;
}

/* Magic Button */
.magic_button { 
  display:block; width:40px; height:40px; 
  border-radius:50%; background: maroon; 
  position: absolute; top:5px; left:10px;
  overflow:hidden; cursor:pointer;
}


/* Basic Setup and Styling */
.main_menu { 
  list-style:none; padding:0p; margin:0px; 
  display:block; text-align:center;
  position:absolute; left:100%; top:0px; right:0px;
  transition:all .3s; -moz-transition:all .3s; -webkit-transition:all .3s;
}

.main_menu li { 
  display:inline-block;margin:0px auto; 
}

.main_menu li a { 
  background:darkseagreen; padding:18px 20px; color: #fff; line-height:50px;
  text-decoration:none; font-family:Verdana; font-size:12px; 
}


/*
 * The CSS Statements for doing the Magic to Open / Close Menu.
 * Notice: Acctually it would be generally better if you add thoose "check classes"
 * into the Body, as the body is the major Element you can trigger from.
 */
body.menu-open .main_menu { left:0px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


<nav class='menu_wrapper'>     
  <ul class='main_menu'>
      <li><a href=#> First Link </a></li>  
      <li><a href=#> Second Link </a></li>
      <li><a href=#> Magic Link </a></li>
      <li><a href=#> Dungeon Entry Link </a></li>
  </ul>   
    
  <div class="magic_button"></div>  
</nav>

Using jQuery or MutationObserver to change CSS of element when another CSS change is detected

1 Answers1