显示UL中的所有LI,而不是仅显示单击的LI。

时间:2013-02-28 12:22:26

标签: javascript jquery html css

我对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:)

3 个答案:

答案 0 :(得分:2)

尝试:

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);

答案 1 :(得分:0)

代码:

$('.region').slideToggle(200);

用类'region'切换所有元素。 $('.region')选择类“region”的所有元素 如果你只想切换一个元素你应该选择他只添加使用函数。

答案 2 :(得分:0)

我已经对它进行了排序,我需要上升一个元素,然后才能进入下一步......纠正了这条线

$(this).parent().next('.region').slideToggle(300); // where .parent is the containing element of .regionTitle, which is div with class regionHeader.

感谢大家的帮助,@ gaurav让我在正确的地方寻找:)