在UL中显示所有的LI,而不是只显示被单击的LI
Showing all the LIs in UL, instead of show only the clicked LI.
我对javascript/jquery非常陌生-我在嵌套的ul中有一个零售商列表,我想显示/隐藏该区域(显示该区域的所有零售商)。它确实显示和隐藏,但所有的区域,而不是我想要的一个-任何帮助非常感谢一如既往
我标记{foreach $regions index region}
<ul class="stockists">
<li>
<div class="regionHeader">
<span class="regionTitle">{$region.label}</span><span class="regionView">View</span>
</div>
<ul class="region">
<li>
{$stockists = $region.stockists}
{foreach $stockists index stockist}
<ul>
<li class="stockistName">{$stockist.name}</li>
<li>{$stockist.address1}</li>
<li>{$stockist.address2},{$stockist.city}</li>
<li>T : {$stockist.telephone}</li>
<li>W : {$stockist.website}</li>
<li><span class="productsButton">Products Stocked</span><span class="mapButton">View on Map</span></li>
</ul>
{/foreach}
</li>
</ul>
</li>
</ul>
{/foreach}
我javascript var stockists = {
start: function() {
$('.region').hide();
$('.regionTitle').click(function(e) {
e.preventDefault();
$('.region').slideToggle(200);
})
}
};
$(stockists.start);
谢谢你看,Rich:)
尝试:
var stockists = {
start: function() {
$('.region').hide();
$('.regionTitle').each(function(){
$(this).click(function(e) {
e.preventDefault();
$(this).next('.region').slideToggle(200);//here is the change basically it will show/hide only the region next to the clicked regionTitle.
});
});
}
};
$(stockists.start);
代码:
$('.region').slideToggle(200);
切换所有类为'region'的元素。$('.region')
选择所有类为"region"的元素如果你只想切换一个元素,你应该选择他只添加使用的功能。
我已经对它进行了排序,我需要上移一个元素,然后才能进行下一步…更正了
一行$(this).parent().next('.region').slideToggle(300); // where .parent is the containing element of .regionTitle, which is div with class regionHeader.
谢谢大家的帮助,@gaurav让我找到了正确的地方:)
相关文章:
- 引导程序:在导航栏中,显示悬停在单个位置的基于Li Link的不同内容
- 在bootstrap中显示隐藏特定的li
- 隐藏/显示包含单词的ul li项目.但只能入住李的子女
- 如何使用jquery显示具体的li数
- 使用jquery显示特定的li标记
- 自动完成搜索无法正常工作,请不要迭代$中的所有元素.每个ul-li都会及时显示响应
- 仅当我在 1 秒后将鼠标悬停在 li 上时,才会在悬停时显示弹出窗口
- 显示/隐藏具有不同类的li元素
- 当单击不同的li时,jQuery显示一个li
- 如何在JavaScript中突出显示li
- 显示与img最接近的li的JQuery Filter
- 隐藏/显示li's列表以及if语句和document.write
- ul li $(this).text() 什么也没显示
- 灯箱“下一个”功能仍然显示已隐藏的元素 (li) 显示:无;
- 使用鼠标悬停显示图像,图像位于 li-tag 之外
- 使用文本输入筛选 LI - 嵌套 LI 不显示
- 我有一个数据列表,我将其转换为 Ul 和 li 的列表,现在我希望这个列表在 JSP 中显示为树
- 如何通过jquery可选显示LI的值->选择事件
- 根据所选择的类别隐藏或显示LI(过滤器)
- 根据单击的类别过滤器隐藏/显示li项