为什么我的 jQuery toggleClass 在我的 C# 转发器中不能正常工作？

Question

我有一个使用中继器的 C# 应用程序，jQuery 为我的应用程序添加了一点活力。 jQuery 的第一部分功能正常，因为内容上下滑动以隐藏或显示任何 ONE 部分已被点击，但第二部分改变所有类包括单击的部分内的那个。这是为什么？

这是我的转发器布局：

<ItemTemplate>                    
        <div class="head"><span class="expand">&nbsp;</span> <%#Eval("Job_Title") %></div>
        <div class="row" style="margin:0px 0px 20px 50px; display: none;">
        <div><%#Eval("Status") %></div>
        <div><%#Eval("Department") %></div>
        <div><%#Eval("Posting_Site") %></div>
        <div><%#Eval("Job_Duties") %></div>
    </div>
</ItemTemplate>

这是我的 jQuery:

<script type="text/javascript">
    $(function () {
        $('.head').click(function () {
            $(this).next('div.row').stop(true, true).slideToggle(400, function () {
                $('.expand').toggleClass('collapse'); 
            });
        });
    });
</script>

Answer 1

$('.expand') 以 class 为目标的所有元素，如果你只想以当前 .head 中的元素为目标，你会做

$(this).prev('.head').find('.expand').toggleClass('collapse')

或者相反的是

var thisOne = $(this).prev('.head').find('.expand');

$('.expand').not(thisOne).toggleClass('collapse');

Answer 2

您使用 class 作为您的选择器，然后使用 next，这意味着您正在迭代包含 'div.row'.

的每个 'head'

你需要这样改：

$(function () {
    $('.head').click(function () {
        $('.head div.row').slideToggle(400, function () {
            $('.expand').toggleClass('collapse'); 
        });
    });
});

为什么我的 jQuery toggleClass 在我的 C# 转发器中不能正常工作？

Why does my jQuery toggleClass not work properly within in my C# repeater?

c#

jquery

repeater