Question

The class, “open”, gets added to the ul element, but not the dropdown#register element.

<ul class="nav"></ul>
<script> $("#register_dropdown").addClass("open"); </script>
<script> $("ul").addClass("open"); </script>
<span class="dropdown" id="register_dropdown"></span>

Answer 1

$("#register_dropdown") returns an empty jQuery object as register_dropdown is not present in the DOM when you execute that line.

I’m not experienced with HAML, but wrapping your scripts inside the DOM ready handler is the way to go:

%script $(function(){ $("#register_dropdown").addClass("open"); });

In plain markup it should be rendered as:

<script> $(function(){ $("#register_dropdown").addClass("open"); }); </script>

You can also use the more verbose way if you prefer (same result as the one above):

$(document).ready(function() {
    //DOM is ready, put your code here
    $("#register_dropdown").addClass("open");
});

This prevents your code from running until the DOM has fully loaded. You may as well just move that line after the element is added to the DOM, but it’s good practice to manipulate the DOM after it’s ready.

Reference