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>