在UL中显示所有的LI,而不是只显示被单击的LI

Showing all the LIs in UL, instead of show only the clicked LI.

本文关键字:显示 LI 单击 UL      更新时间:2023-09-26

我对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让我找到了正确的地方:)