在侧边导航上具有不同的单击区域

Having different click areas on sidenav

本文关键字：单击 区域 导航      更新时间：2023-09-26

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

<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 上设置不同的点击区域吗？一个用于折叠，另一个用于调用函数以加载右侧内容页面。

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

不要将数据切换属性提供给锚点，而是将其提供给图标元素，以便切换仅适用于图标。您可以使用此处的类进行加号和减号，并在类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，如果为 true，则仅调用自定义函数 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');
}

见小提琴

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 函数中(

以上有什么作用

概念证明：

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>

相关文章：