Имея разные области щелчков на sidenav

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 вид бокового навигационного списка, где + или - следует кликать только для расширения и свертывания. Пожалуйста, нажмите, чтобы построить онлайн по этой ссылке, чтобы увидеть сторону nav. Другая область (кроме значков + и -) должна действовать как ссылка href для загрузки страницы.

Answer 1

Вместо того, чтобы дать атрибут данных тумблер на якорь, отдайте его значок элемента таким образом, что 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

Снимите встроенный 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>