Javascript 同一页面上的多个切换

因此，我有以下HTML代码：

<span class="full-width-red-left"></span>
<div class="full-width-red-wrapper">"Title
    <img src="/images/header_toggle_up.png" class="header-toggle" id="stafflist-icon" />
</div>
<span class="full-width-red-right"></span>
<div class="stafflist-content">
    <div class="full-width-content">
        Content
    </div>
</div>
<div class="full-width-footer"></div>

<span class="full-width-red-left"></span>
<div class="full-width-red-wrapper">"Title
    <img src="/images/header_toggle_up.png" class="header-toggle" id="stafflist-icon" />
</div>
<span class="full-width-red-right"></span>
<div class="stafflist-content">
    <div class="full-width-content">
        Content
    </div>
</div>
<div class="full-width-footer"></div>

“头衔
内容
“头衔
内容

这在页面上多次显示，由PHP foreach生成

然后，我将尝试使用以下JS代码：

<script type="text/javascript">
$(document).ready(function() {

    $("#stafflist-icon").toggle(function(){

       $(".stafflist-content").slideUp('slow');
    } , 

    function() { 
        $(".stafflist-content").slideDown('slow');
    }); 
}); 
</script>

$（文档）.ready（函数（）{
$（“#stafflist icon”）.toggle（函数（）{
$（“.stafflist content”）.slideUp（'slow'）；
} , 
函数（）{
$（“.stafflist content”）.slideDown（'slow'）；
}); 
}); 

显然，使用该代码，如果按下任何#stafflist图标，所有.stafflist内容div都会上下滑动。我需要的是，当按下#stafflist图标时，只有next.stafflist内容向上或向下滑动，而不是每一个

---

如果不使用foreach中的计数器或其他东西为每个DOM元素生成ID，这是可能的吗？

您不能拥有具有相同ID的多个DOM元素

只有具有该ID的第一个元素才能获取事件

没有什么能像你所希望的那样起作用

---

您可以使用如图所示的

nextFind

插件选择要滑动的项目

//to be used instead of prev/nextAll().eq(0);
(function ($) {
    var dirFind = function (selector, dir) {

        var elems = [];
        this.each(function (i, item) {
            while (item = item[dir]) {
                if (item.nodeType == 1) {
                    if ($(item).is(selector)) {
                        elems.push(item);
                        break;
                    }
                }
            }
        });

        return (this.pushStack(elems, dir, selector));
    }

    $.each({
        'prevFind': 'previousSibling',
        'nextFind': 'nextSibling'
    }, function (method, dir) {
        $.fn[method] = function (selector) {
            return dirFind.call(this, selector, dir);
        };
    });
}(jQuery));
//end of new prevall, nextall

因此，您可以：

$(this).nextFind(".stafflist-content").slideDown('slow');

---

我在几天前做的页面上使用了切换。。。看看菜单的html和源代码。www.termoservis.hr一个页面上没有多个实例吗？如果是单切换，则操作简单。您可以获取当前切换的索引，然后仅切换该索引的内容，例如$（“.StatffList内容：eq（“+toggleIndex+”））。SlideDown（“慢”）；稍微更改了我的问题。@Tenatious这不是一个轻微的更改。如果您有新问题，请提出新问题……不要更改操作。