html

Question

我在 header 中有 link 的手风琴。在 header 上的任意位置单击都可以打开手风琴。因此，当单击 link 时，不会转到 link (href)，而是打开手风琴。

期望的行为：

我希望在 header 中除 link 之外的任意位置单击时打开手风琴。（即当点击 link 时，必须重定向用户并且不能打开手风琴）

<div>
    <accordion close-others="false">
        <accordion-group is-open="isopen" ng-repeat="ele in arr">
            <accordion-heading>
                <div>
                    <i class="pull-right glyphicon"
                       ng-class="{'glyphicon-chevron-down': isopen, 'glyphicon-chevron-right': !isopen}"></i>
                    <div style="width: 50%; float: left; padding-left: 6cm;">{{ele.a}}
                        <span >
                            <a href="https://www.fb.com">link</a>
                        </span>
                    </div>
                    <div style="text-align: center;">
                        <span>{{ele.b}}</span>
                    </div>
                </div>
            </accordion-heading>
       </accordion-group>
     </accordion>
  </div>

Plnkr

Answer 1

您需要在 ng-click -> ng-click="$event.stopPropagation(); fn1();"

中调用 $event.stopPropagation();

Answer 2

诀窍是在锚点的 ng-click 处理程序中调用 Event.stopPropagation()：

<a href="https://www.fb.com" ng-click="$event.stopPropagation()">link</a>

这是更新后的 plunker。

Answer 3

使用

ng-click="$event.stopPropagation()"//this will not apply accordion click event on this link tag

而不是 ng-click="fn1()"

这可能不适用于 plunk，请在您的代码中尝试。

Answer 4

使用accordion-heading时，其中的所有内容都会变成<a>标签。

您的代码将在浏览器中呈现

<h4 class="panel-title">
      <a class="accordion-toggle ng-binding" ng-click="isOpen = !isOpen" accordion-transclude="heading">
                <div class="ng-scope">
                    <i class="pull-right glyphicon glyphicon-chevron-right" ng-class="{'glyphicon-chevron-down': isopen, 'glyphicon-chevron-right': !isopen}"></i>
                    <div style="width: 50%; float: left; padding-left: 6cm;" class="ng-binding">1
                        <span>
                            <a href="https://www.fb.com">link</a>
                        </span>
                    </div>
                    <div style="text-align: center;">
                        <span class="ng-binding">2</span>
                    </div>
                </div>
            </a>
    </h4>

这是解决方案

html - 手风琴中的 href header 不工作

html - href in accordion header not working

anchor

accordion

angularjs

angular-ui-bootstrap

这可能不适用于 plunk，请在您的代码中尝试。