Question

使用Bootstrap 3.3.6和jQuery，我试图启用list-group-item链接转到页面，只有当它的子下拉列表打开/可见时。因此，在第一次单击时，下拉菜单会展开。但是，如果有人在下拉列表打开后单击相同的链接，那么他们应该转到分配给同一链接的href值。到目前为止，这是我的代码......

  <div class="col-sm-4" id="my-list">
                    <ul class="list-group">
                        <li class="list-group-item"><a href="#">Link 0</a></li>
                        <li class="list-group-item" data-toggle="collapse" data-target="#set01" data-parent="#my-list">
                        <a class="jq-list-link" href="http://google.com">Link 1</a>
                        <span class="glyphicon glyphicon-menu-down text-color-red pull-right"></span>
                            <ul class="sublinks collapse" id="set01">
                                <li class="list-group-item"><a href="#">Sub Item 1</a></li>
                                <li class="list-group-item"><a href="#">Sub Item 2</a></li>
                            </ul>
                        </li>
                        <li class="list-group-item" data-toggle="collapse" data-target="#set02" data-parent="#my-list">
                        <a href="http://google.com" class="jq-list-link">Link 2</a>
                        <span class="glyphicon glyphicon-menu-down text-color-red pull-right"></span>
                            <ul class="sublinks collapse" id="set02">
                                <li class="list-group-item"><a href="#">Sub Item 1</a></li>
                                <li class="list-group-item"><a href="#">Sub Item 2</a></li>
                            </ul>
                        </li>
                        <li class="list-group-item"><a href="#">Link 3</a></li>
                        <li class="list-group-item"><a href="#">Link 4</a></li>
                    </ul>
                </div>

我试图使用的jQuery是以下内容......

var mtarget = $('.jq-list-link');
if (mtarget.length) {   
    mtarget.click(function(e) {

        if ( mtarget.attr('aria-expanded') == "true") {                    
        console.log('aria true');
        window.location = $(this).href; 
        } else if (mtarget.attr('aria-expanded') == "false") {
        console.log('aria false');
        e.preventDefault();
        } else {
        console.log('aria does not exist');
        e.preventDefault();
        }                                
    });
  }

我的问题是，在第二次点击时，它不会去任何地方。它只是关闭它的儿童面板。它认为咏叹调扩展并不是一直存在的。我是否必须使用自定义jQuery来实现我的目标？如果是这样，我做错了什么？我也在bootply上设置项目 - http://www.bootply.com/rhJKRJl7KL

谢谢！

Answer 1

咏叹调扩大＆＃34; attr出现在包含＆＃34; li＆＃34;而不是＆＃34; a＆＃34;标签。所以试试：

<script>
var mtarget = $('.jq-list-link');
if (mtarget.length) {   
    mtarget.click(function(e) {

        if ( $(this).parent().attr('aria-expanded') == "true") {                    
        console.log('aria true');
        window.location = $(this).href; 
        } else if ($(this).parent().attr('aria-expanded') == "false") {
        console.log('aria false');
        e.preventDefault();
        } else {
        console.log('aria does not exist');
        e.preventDefault();
        }                                
    });
  }
</script>

如何在Bootstrap 3.3.6中第二次单击list-group-item时启用href链接？

1 个答案: