在sidenav上有不同的点击区域-Java 学习之路

我正在使用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来加载页面 .

3 回答

不是将数据切换属性赋给锚，而是将其提供给图标元素，以便切换仅适用于图标 . 您可以使用类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

回复于 2024-05-09T13:06:53+08:00

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函数中有它）

以上是做什么的

回复于 2024-05-09T13:06:53+08:00

概念证明：

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>

回复于 2024-05-09T13:06:53+08:00

在sidenav上有不同的点击区域

3 回答

相关问题