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类从标记中移出，则样式会变得混乱。

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

P.S：试图实施这种http://cssmenumaker.com/menu/modern-jquery-accordion-menu类型的侧面导航列表，其中+或 - 应该是可点击仅用于展开和折叠。请点击该链接的联机版本以查看侧面导航栏。其他区域（除了+和 - 图标）应该充当链接href来加载页面。

Answer 1

而不是给该数据触发属性为锚，给它的图标元素，使切换仅适用于图标。您可以使用类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 2

jsbin demo

删除内联JS你在你的HTML：

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