如何使用箭头外观和感觉做面包屑引导程序？ [英] How can I do breadcrumbs bootstrap with arrow look and feel?

问题描述

我正在研究MVC 5项目，我必须在点击时创建电气>照明> HT& LT .. 。

I am working on MVC 5 project, there I have to create Electrical > Lighting > HT&LT.. with respect to click.

示例：如果用户点击照明，则显示为电气>照明，或者甚至点击 HT& LT 然后显示像电气>照明> HT& LT 那样。

Example: If the user click on Lighting, then show like Electrical > Lighting or even if click on HT&LT then show like Electrical > Lighting > HT&LT like that.

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

Here is a div with idSearch-item that I have added bootstrap breadcrumbs (hardcoded value),

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

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

How can I do this when click on each a element?

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

现在是显示 HT& LT / HT& LT ，但我想在 idSearch-item 电气>照明> HT& LT .. c $ c> div如果使用以下代码点击 HT& LT 。

Now It is showing HT&LT/HT&LT but I want to display Electrical > Lighting > HT&LT.. inside the idSearch-item div if click on HT&LT by using below code.

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

我该怎么做？

请帮助我...

推荐答案

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

You can achieve a 'breadcrumbs' effect by creating a class (in this case .more) which you animate on click, to show/hide the visibility of the children:

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

样式本身来自：在之前伪装选择器的内容。只需使用大于号：

The styling itself comes from the :before psuedo-selector's content. Just use the greater-than sign:

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

只需按照您的喜好插入即可：）

Simply adjust to insert it how you'd like :)

希望这有帮助！ ：）

编辑：

要让它在点击时更新标题，您需要做的就是根据点击的元素的 text（）更改 innerHTML ：

To have it update the title on click, all you need to do is change the innerHTML based on the text() of the element that was clicked:

$("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>

希望这会有所帮助！ ：）

Hope this helps! :)

这篇关于如何使用箭头外观和感觉做面包屑引导程序？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！