如何使用箭头的外观和感觉来引导面包屑呢？

Question

我的工作是MVC 5项目，在那里我必须创建电气>照明>HT<.的点击。

例子:如果用户点击照明，那么显示喜欢电气>照明，或者即使点击HT<，也会显示喜欢电气>照明> HT<那样。

​

​

下面是一个带有idSearch-item的div，我添加了引导面包屑(硬编码值)，

​

<div class="row" style="display:none;padding:0 0 20px 0" id="idSearch-item">
                
            </div>

​

当单击每个a元素时，我如何做到这一点？

​

<ul>   
<li class="dropdown-header">Electrical</li> 
    <li>
        <a href="#">Lighting</a>      
    </li>
    <li>
        <a href="#">HT &amp; LT</a>
    </li>
</ul>

​

现在显示的是HT，但如果使用下面的代码单击HT<，则希望在idSearch-item div中显示电气>照明>HT<.。

​

$("li a").each(function () {
        $(this).click(function () {           
            document.getElementById("idSearch-item").innerHTML = '<ul class="breadcrumb"><li><a href="#">' + $(this).text() + '</a></li><li>' + $(this).text() + '</li></ul>';
            $('#idSearch-item').show();
        });
    });

​

我该怎么做？

请帮帮我..。

Answer 1

您可以通过创建一个类(在本例中是.more)来显示/隐藏子级的可见性，从而实现“面包屑”效果：

​

$(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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="collapse">
  <li>Top-level without children
  <li class="more">Top-level with children
    <ul>
      <li>Sub-level without children</li>
      <li class="more">Sub-level with children
        <ul>
          <li>Child 1</li>
          <li>Child 2</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

​

造型本身来自:before的psuedo选择器的content。只需使用更大的符号：

#collapse .more:before {
  content: ">";
  padding-right: 5px;
}

)只需调整以您想要的方式插入它:)

希望这会有帮助！)

编辑

要让它在单击时更新标题，只需根据单击的元素的innerHTML更改text()：

​

$("li").on("click", "a", function() {
  document.getElementById("idSearch-item").innerHTML = $(this).text();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="idSearch-item">HEADER</div>
<ul>
  <li class="dropdown-header">Electrical</li>
  <li>
    <a href="#">Lighting</a>
  </li>
  <li>
    <a href="#">HT &amp; LT</a>
  </li>
</ul>

​

希望这会有帮助！)