Question

使用jquery和bootstrap，以下嵌套的可折叠列表可以正常工作。请注意，当页面加载完成时，可折叠列表中的所有顶级菜单项都会出现。

https://jsfiddle.net/bdconnell/6148rb73/1/

  $(document).ready(function() {
    $(function() {
      $('.list-group-item').on('click', function(e) {
        $('.glyphicon', this)
          .toggleClass('glyphicon-chevron-right')
          .toggleClass('glyphicon-chevron-down')
           console.log("   Element: ",this);
      });
    });
  });

<div class="just-padding">
  <div class="list-group list-group-root well">
    <div class="list-group-item" id="group1">
      <i href="#item-1" class="glyphicon glyphicon-chevron-right" data-toggle="collapse"></i>
      <a style="display:inline-block" href="x">Item 1</a>
    </div>
    <div class="list-group collapse" id="item-1">
      <div class="list-group-item" id="group1-1">
        <i href="#item-1-1" class="glyphicon glyphicon-chevron-right" data-toggle="collapse"></i>
        <a href="x">Item 1.1</a>
      </div>
      <div class="list-group collapse" id="item-1-1">
        <div href="#" class="list-group-item">
          <a href="x">Item 1.1.1</a>
        </div>
        <div href="#" class="list-group-item">
          <a href="x">Item 1.1.2</a>
        </div>
        <div href="#" class="list-group-item">
          <a href="x">Item 1.1.3</a>
        </div>
      </div>
    </div>
  </div>
</div>

我现在想修改代码，以便在页面加载完成后，结果是仅关闭了第一级可折叠组。我决定为jquery ready函数中的第一组添加对事件处理程序的单行jquery触发器调用，该触发器应模拟单击元素，如下所示： $('#group1').trigger('click');

https://jsfiddle.net/bdconnell/dha9wvn7/

在页面准备功能中添加触发器调用的结果是，仅将插入符号（而不是可折叠列表元素）关闭（如上图的小提琴所示）。插入号和可折叠列表都应被拒绝。进入此状态后，如果您单击任何插入符号，可折叠列表仍将起作用，但是group1插入符号状态与其可折叠列表视图不同步。

我在click事件处理程序中添加了一个console.log调用，以确认1）该事件是由jquery触发调用触发的； 2）该事件处理程序中使用的“ this”元素与上面没有jQuery触发器调用的第一个“成功”方案。

我是javascript / jquery的新手（也是第一篇堆栈交换文章）。

我不明白或做错了什么？

页面初始化中的jquery trigger.click事件未按预期工作

0 个答案: