Search code examples
jquerycsszurb-foundationzurb-foundation-6drilldown

Unable to change parent properties

I am using foundation accordian menu. What I am trying to achieve is to modify the parent properties of my li_left_border class.

The reason I am doing this is because the li_left_border class has the URL I am currently on, in this case it is $10, see the picture.

I want to show my drill down as expanded when the site is loaded.

enter image description here

I have tried:

$( ".li_left_border" ).parent().addClass('test');
$( ".li_left_border" ).parent().css('display', 'block');

enter image description here

It will work when the display becomes from none to block, which I have tested in developer F12. The problem is I am unable to change the parent properties, I dont know how to get to the parent ul.

<script src="game.js"></script>
<script>
   $(document).ready(function() {
        $(document).foundation();
        $( ".li_left_border" ).parents("ul").addClass('test');
        $( ".li_left_border" ).parents("ul").css('display', 'block');
   })
})
</script>
Solution

  • With parent, you get the li element, but you want to get the ul element, so try:

      $( ".li_left_border" ).parents("ul").addClass('test');
  $( ".li_left_border" ).parents("ul").css('display', 'block');

    Here is a working example: https://jsfiddle.net/L4brd0bL/

    Also ensure that the HTML is already loaded when the js executes, either by putting the js code at the bottom of the HTML, or by using $(document).ready like this:

    $(document).ready(function() {
      $( ".li_left_border" ).parents("ul").addClass('test');
      $( ".li_left_border" ).parents("ul").css('display', 'block');
});