0

我创建了一个由某些菜单项组成的垂直列表菜单。单击任何菜单项时，列表会展开以显示其内部子菜单项。

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

现在我用这个菜单放置了折叠/展开箭头，类似于jquery 手风琴中的菜单，它们在点击事件上切换。

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

情况可以看成，在加载窗口——

►菜单1

子菜单

子菜单

子菜单

►菜单2

►菜单3

►菜单4

如您所见，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，但它会一次展开所有箭头。

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

4

2 回答 2

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');
于 2013-09-16T07:28:38.150 回答
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();
   });
});
于 2013-09-16T07:23:37.430 回答