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

那么有人可以说明如何在父李上有不同的点击区域吗？一个是崩溃，另一个是调用函数来加载右侧内容页面。

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

Answer 1

<强> 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 2

不是将数据切换属性赋给锚点，而是将其提供给图标元素，以便切换仅适用于图标。您可以使用课程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，如果为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');
}

See fiddle

Answer 3

概念证明：

＆＃13;

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;
});

＆＃13;

<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>

＆＃13;

在sidenav上有不同的点击区域

3 个答案: