jQuery显示隐藏函数工作不正常

好的，我有这个代码

//<!--

  $(document).ready (function() {
 $('.topicsShow').hide();
 var i = 1;
 $('.clickFunc').each(function(){
     $(this).click(function(){ 
         $('.topicsShow:eq('+$(this).data('idf')+')').toggle('slow');
     });
     $(this).data('idf',i);
     i++;
});
  });

// -->

//

由于变量i=0，它一开始不能正常工作；所以我改成1。工作稍微好一点。为什么会这样？有人能解释一下吗？ 它工作不完全正确的原因是，当我单击my.clickFunc时，它会打开一个td元素。我隐藏了一个完整的tr，您假设单击该元素上方的tr元素（即类别标题），它会打开该类别中的所有主题。当我点击它时，这段代码使它只打开tr中的一个td元素

有人能帮我一点忙吗

<tr class="clickFunc">
  <td></td>
 <td></td>
</tr>
<tr class="topicsShow">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="topicsShow">
<td></td>
 <td></td>
<td></td>
<td></td>
</tr>
<tr class="clickFunc">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="topicsShow">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>

---

这是生成内容的基本模型。如果我添加更多的类别/主题，将会有更多的主题显示和更多的clickFunc，这有时是不起作用的，因为如果你将这些div的可见性样式硬编码为“hidden”，而jquery的“show”方法无法恢复它。奇怪的是，相对于“显示”方法，“隐藏”可以毫无问题地恢复硬编码的“可见”样式。因此，要按预期隐藏/显示元素，您必须使用hide/show method combo而不使用可见性样式硬编码，或者使用jquery的css方法并将可见性样式设置为所需的样式。

尝试一下：

$(document).ready(function () {
    'use strict';
    $('.topicsShow').hide();
    $('.clickFunc').each(function (i, elem) {
        //i and elem are parameters passed to .each;
        //i naturally increments.
        var self = elem; //cache object so that jQuery doesn't do several lookups
        self.data('idf', i).click(function (e) {
            $('.topicsShow:eq(' + self.data('idf') + ')').toggle('slow');
            e.preventDefault(); //cancel bubbling
            return false;
        });
    });
});

我猜您需要分配

$（this）.data（'idf'，i）之前单击
处理程序

如果这没有帮助，请在你的文章中添加一些示例标记

更新：

这适用于您的标记：

$(document).ready(function () {
    $('.topicsShow').hide(); //hide topics
    $('.clickFunc').each(function (i, elem) {
        var self = $(elem) //cache object
        self.click(function (e) {
            //.nextUntil('.clickFunc') === get all siblings until .clickFunc
            //.filter('.topicsShow') === select only elements that have the .topicsShow class
            self.nextUntil('.clickFunc').filter('.topicsShow').toggle('slow');
            e.preventDefault(); //cancel bubbling
            return false;
        });
    });
});

我的原始代码没有做任何事情的原因是我忘记将
elem
放入jQuery包装器（即
$（elem）
）

e.preventDefault（）不阻止单击事件。相反，它可以防止click事件冒泡到更高阶的元素（在祖先树的后面）。我之所以包含它，是因为我假设您不希望在切换
tr
元素之后发生任何其他事情。我还包括
returnfalse出于同样的原因（它可能是多余的，但我不确定它是否是多余的，所以我还是包含了它）

（您在问题中使用的：）的目的是将任意值（如变量值，或者在本例中为
i
）存储到选择器中匹配的DOM元素中

您问题中的代码执行以下操作：

$(document).ready(function () {
    $('.topicsShow').hide(); //hide topics
    var i = 1;  //declare a var for incrementing
    $('.clickFunc').each(function () {
        $(this).click(function () {
            //:eq(0) or :eq(1) as this only loops twice, see notes in markup below
            //when you intialized `i` to 1, this became :eq(1) or :eq(2)
            $('.topicsShow:eq(' + $(this).data('idf') + ')').toggle('slow');
        });
        $(this).data('idf', i); //store the value of `i` (0 || 1) || (1 || 2) in the matched element
        i++; //increment `i`
    });
});

使用此标记：

<tr class="clickFunc"><!-- with var i = 0; click handler toggles .topicsShow:eq(0)-->
    <td>clickFunc</td><!-- with var i = 1; click handler toggles .topicsShow:eq(1)-->
    <td>clickFunc</td>
</tr>
<tr class="topicsShow"><!-- .topicsShow:eq(0) -->
    <td>topicsShow</td>
    <td>topicsShow</td>
    <td>topicsShow</td>
    <td>topicsShow</td>
</tr>
<tr class="topicsShow"><!-- .topicsShow:eq(1) -->
    <td>topicsShow</td>
    <td>topicsShow</td>
    <td>topicsShow</td>
    <td>topicsShow</td>
</tr>
<tr class="clickFunc"><!-- click handler toggles :eq(2)-->
    <td>clickFunc</td><!-- with var i = 0; click handler toggles .topicsShow:eq(1)-->
    <td>clickFunc</td><!-- with var i = 1; click handler toggles .topicsShow:eq(2)-->
    <td>clickFunc</td>
    <td>clickFunc</td>
</tr>
<tr class="topicsShow"><!-- .topicsShow:eq(2) -->
    <td>topicsShow</td>
    <td>topicsShow</td>
    <td>topicsShow</td>
    <td>topicsShow</td>
</tr>


clickFunc
clickFunc
主题秀
主题秀
主题秀
主题秀
主题秀
主题秀
主题秀
主题秀
clickFunc
clickFunc
clickFunc
clickFunc
主题秀
主题秀
主题秀
主题秀

希望这能解释一切
 它是硬编码的style=“display:none；”所以如果我把它取下来，离开隐藏，它应该可以工作吗？就像我说的，它在一定程度上起作用了……我的经验是，
jQuery.show（）
可以覆盖硬编码的
显示：无
。会让您知道。它的代码是用php处理程序解析的。虽然我必须发布一些为ya.pete生成的代码，但由于某些原因，您的代码根本不起作用。我能问一下为什么e.preventDefault（）；有？这不会取消点击吗？？你能回答我这个问题吗，我从来没有见过。数据（'idf'，i）那是什么？我刚刚试过这个$（document）.ready（函数（）{$（'.clickFunc'）。单击（函数（）{$（this）.closest（'tr'）。同级（'.topicshow'）.toggle（）；}）；}）；它一下子就把它们都打开了