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

时间:2013-09-16 06:59:55

标签: javascript jquery html css

我创建了一个垂直列表菜单,其中包含某些菜单项。单击任何菜单项时,列表将展开以显示其内部子菜单项。

此外,当页面加载时,其中一个菜单将根据页面自动展开。我使用jquery切换它,它工作正常。

现在我已经使用此菜单放置了折叠/展开箭头,类似于jquery accordian中的菜单,并且它们会在点击事件上切换。

我的问题是,当页面加载时,其中一个菜单项会崩溃,但箭头不会随之折叠,当我再次点击该菜单折叠/切换回来时,箭头会开始切换。

情况可以看作,在加载窗口 -

►Menu1

子菜单

子菜单

子菜单

►Menu2

►Menu3

►Menu4

正如您所见,带有menu1的箭头未关闭。

直到我的代码 -

<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();
});
});

我使用.load,但它会立刻展开所有箭头。

我想知道的是在加载窗口时切换特定元素的方法。这样其他元素不会受到影响。像目前的情况是箭头。每当触发加载事件时,它都会切换所有箭头。

2 个答案:

答案 0 :(得分:0)

$(this)是指.option-heading;任何选项标题(这就是所有箭头都被切换的原因)。您应该在活动选项标题中添加一个类,以使其唯一。

这样的事情可能会起到作用:

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

答案 1 :(得分:0)

我认为使用一个div来展示箭头会更好,请看:

<div class="arrow expanded"></div>
or
<div class="arrow"></div>
CSS风格的

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

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

使用这种方法,您可以通过以下方式轻松切换箭头图标:

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

或者您可以通过以下方式检查展开/折叠:

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