加载时自动切换展开/折叠箭头

Question

I have created a vertical list menu which consist of certain menu items. On clicking any menu item, the list expands to show its inner sub menu items.

Also, when the page is loaded, one of the menu will expand automatically according to the page. I used jquery toggle for this and it is working fine.

Now I have placed collapse/expand arrow with this menu similar to those in jquery accordian and they toggle on click event.

My problem is that when page loads, one of the menu items collapse but the arrow does not collapse with it and when I click on that menu again to collapse/toggle back, the arrow starts to toggle.

The situation can be seen as, On loading window -

►Menu1

submenu

submenu

submenu

►Menu2

►Menu3

►Menu4

As you can see the arrow with the menu1 is not down.

My code till yet -

<ul>
<div class="option-heading">
  <li onclick="menu()"> //menu is the vertical menu which shows up.
      <a href="#" >
        <div class="arrow-up">&#9658;</div>
        <div style="display: none;" class="arrow-down">&#9660;</div>
      </a>
  </li>
  </div> 
</ul>    

<script>
$(document).ready(function() {
     $(".option-heading").click(function(){
     $(this).find(".arrow-up, .arrow-down").toggle();
});
});

I used .load, but it expands all the arrows at once.

All I want to know is the way to toggle a particular element on loading the window. Such that other elements does not get affected by it. Like the present situation is with the arrows. Whenever the load event is triggered it toggles all the arrows.

Answer 1

$(this) refers to .option-heading ; any option-heading (that's why all the arrows are toggled). You should add a class to the active option-heading to make it unique.

Something like this might do the job:

$(document).ready(function() {
   $(".option-heading").click(function(){
     $(".option-heading").removeClass("active");
     $(this).addClass("active");
     $(".option-heading.active").find(".arrow-up, .arrow-down").toggle();
   });
});

Answer 2

i think it's better to use one div to show a arrow, see this:

<div class="arrow expanded"></div>
or
<div class="arrow"></div>

in CSS style:

div.arrow {       /* default/collapsed style */
    width: 20px;
    height: 20px;
    backgound: url('address of collapse image'); /* if use image for arrow */
    /* content: ►  */ /* if use special character */
}

div.arrow.expanded { /* expanded style */
    backgound: url('address of expand image'); /* if use image for arrow */
    /* content: ▼  */ /* if use special character */
}

with this approach you can easily toggle arrow icon by:

$('div.arrow').toggleClass('expanded');

Or you can check expand/collapse by:

var isExpanded = $('div.arrow').is('.expanded');