在 sidenav 上有不同的点击区域

Question

我正在使用引导程序，并且我正在使用侧导航在页面左侧提供可折叠列表。下面是我的代码。

<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()。我将此数据切换和数据目标更改为 i 类，但问题是该函数仍在被调用，如果我将 i 类移出标签，样式就会混乱。

那么有人可以解释一下如何在父 li 上设置不同的点击区域吗？一种是折叠，另一种是调用函数加载右侧内容页面。

P.S： 尝试实现这种http://cssmenumaker.com/menu/modern-jquery-accordion-menu 类型的侧导航列表，其中 + 或 - 应该是可点击的，仅用于展开和折叠。请单击该链接中的在线构建以查看侧面导航。其他区域（除了 + 和 - 图标）应作为链接 href 来加载页面。

Answer 1

不要将 data-toggle 属性赋予锚点，而是将其赋予图标元素，以便切换仅适用于图标。您可以使用 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');
});

现在点击锚点，你可以检查元素是否为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

Answer 2

jsbin demo

删除 HTML 中的内联 JS：

   <a class="active" href="#" data-toggle="collapse" data-target="#licomp1">
      <i class="fa fa-fw fa-arrow-v"></i>Parent1
   </a>

只需将其添加到您的 jQuery 中：

function loadelementsonpage(){
  alert("LOADED ELEMENTS! YIIHA"); // Or whatever goes here
}

$(".side-nav").on("click", "a[data-target]", function(e) {
  e.preventDefault(); // Prevent default Browser anchor-click behavior
  if( !$(e.target).hasClass("fa") ){ // If the clicked el. target was not `.fa`
    // means it was the parent `a` to get the click event.  Therefore...
    e.stopPropagation();         // prevent the click to propagate
                                 // to underneath layers triggering stuff and...
    return loadelementsonpage(); // execute (return) our desired function.
  }
});

^{（确保你在 document.ready 函数中有它）}

上面的作用

Answer 3

概念证明：

function loadelementsonpage(target) {
  // example stuff
  $(target).toggle();
}

$(".side-nav").on("click", "a[data-toggle]", function(event) {
  event.preventDefault(); // Prevent default Browser anchor-click behavior

  var icon = $(event.target).find('.collapseIcon');

  if (icon.text() === '+') {
    icon.text('-');
  } else {
    icon.text('+');
  }
  
  loadelementsonpage(event.target.getAttribute('data-target'));

  return false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav navbar-nav side-nav">
  <li>
    <a class="active" href="#" data-toggle="collapse" data-target="#licomp1">
      <span class="collapseIcon">-</span> Parent1
    </a>
    <ul id="licomp1" class="collapse">
      <li><a href="#">Child1</a>
      </li>
      <li><a href="#">Child2</a>
      </li>
      <li><a href="#">Child3</a>
      </li>
    </ul>
  </li>
</ul>