javascript - 在 sidenav 上有不同的点击区域

Question

我正在使用 Bootstrap ，因为我正在使用侧导航在页面左侧提供可折叠列表。下面是我的代码。

<ul class="nav navbar-nav side-nav">
    <li>
       <a class="active" href="#" onclick="loadelementsonpage(); return false" data-toggle="collapse" data-target="#licomp1">
          <i class="fa fa-fw fa-arrow-v"></i>Parent1
       </a>
       <ul id="licomp1" class="collapse">
         <li><a href="#" onclick="loadelements1();">Child1</a></li>
         <li><a href="#" onclick="loadelements2();">Child2</a></li>
         <li><a href="#" onclick="loadelements3();">Child3</a></li>
        </ul>
    </li>
</ul>

而不是固定的<i class="fa fa-fw fa-arrow-v"></i>我想使用切换加号和减号。如代码所示，我在单击 parent1 时调用了一个函数。但是当我尝试扩展 ul 时，函数 loadelementsonpage()每次都被调用。所以，我希望列表仅在单击该切换图像时折叠。以同样的方式我想调用loadelementsonpage()仅当单击该切换图像的外部区域时。我将此 data-toggle 和 data-target 更改为 i 类，但问题是该函数仍在被调用，如果我将 i 类移出标签，样式就会困惑。

那么有人可以阐明如何在父 li 上有不同的点击区域吗？一个用于折叠，另一个用于调用函数以加载右侧内容页面。

P.S: 尝试实现这个 http://cssmenumaker.com/menu/modern-jquery-accordion-menu一种侧面导航列表，其中 + 或 - 应该可以单击以仅展开和折叠。请单击该链接中的在线构建以查看侧面导航。其他区域(+ 和 - 图标除外)应充当链接 href 以加载页面。

Answer 1

与其将 data-toggle 属性赋予 anchor ，不如将其赋予 icon 元素，以便 toggle 仅对 icon 起作用。您可以使用类 here for plus and minus并在类 glyphicon-plus 和 glyphicon-minus

之间切换

<a class="active" href="#">
   <span data-toggle="collapse"  class="glyphicon glyphicon-plus" data-target="#licomp1"></span>Parent1
</a>

$('.side-nav a span').on('click', function () {
    $(this).toggleClass('glyphicon-plus glyphicon-minus');
});

现在单击 anchor ，您可以检查元素是否为 A，如果为真，则仅调用自定义函数 loadelementsonpage。

$('.side-nav a').on('click', function (e) {
    console.log(e.target.tagName);
    if (e.target.tagName == "A") {
        loadelementsonpage();
        return true;
    }
})

function loadelementsonpage() {
    alert('Load elements on page');
}

See fiddle