如何使用箭头外观和感觉做面包屑引导程序？

我正在研究MVC 5项目，在那里我必须创建Electrical> Lighting> HT＆LT ..关于点击。

示例：如果用户单击Lighting ，则显示为Electrical> Lighting，或者即使单击HT＆LT，也会显示如Electrical> Lighting> HT＆LT 。

这是一个带有idSearch-item的div，我添加了bootstrap breadcrumbs（硬编码值），

单击每个元素时如何执行此操作？

 
 
Electrical
 
 Lighting 
 
 HT & LT 
  

现在它显示了HT＆LT / HT＆LT，但我想在idSearch-item div中显示Electrical> Lighting> HT＆LT ..如果使用下面的代码点击HT＆LT 。

 $("li a").each(function () { $(this).click(function () { document.getElementById("idSearch-item").innerHTML = '
' + $(this).text() + '
' + $(this).text() + '
'; $('#idSearch-item').show(); }); }); 

我怎样才能做到这一点 ？

请帮我…

Answer 1

你可以通过创建一个类（在这种情况下.more ）来实现’breadcrumb’效果，你可以点击它来显示/隐藏孩子的可见性：

 $(function() { $("#collapse li").children('ul').hide(); $("#collapse li").on('click', function(event) { $(this).children('ul').stop().slideToggle(350); $(this).toggleClass("open"); event.stopPropagation(); }); }); 

 #collapse .more { list-style: none; cursor: pointer; text-indent: -1em; } #collapse .more:before { content: "+"; padding-right: 5px; } #collapse .more ul { text-indent: 0em; cursor: initial; } 

  
 
Top-level without children 
Top-level with children 
 
Sub-level without children
 
Sub-level with children 
 
Child 1
 
Child 2