问题描述
我正在研究MVC 5项目,我必须在点击时创建电气>照明> HT& LT .. 。
I am working on MVC 5 project, there I have to create Electrical > Lighting > HT<.. 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< then show like Electrical > Lighting > HT< 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 & LT</a>
</li>
</ul>
现在是显示 HT& LT / HT& LT ,但我想在 idSearch-item $中显示电气>照明> HT& LT .. c $ c> div如果使用以下代码点击 HT& LT 。
Now It is showing HT</HT< but I want to display Electrical > Lighting > HT<.. inside the idSearch-item
div if click on HT< 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 & LT</a>
</li>
</ul>
希望这会有所帮助! :)
Hope this helps! :)
这篇关于如何使用箭头外观和感觉做面包屑引导程序?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!