Question

我需要帮助，请... 我需要单击一个图标来打开一个不是下一个元素的隐藏div。这是我的标记（记录div在页面上重复多次......

<div class='record'>
    <div class="marker_name left"><a href="marker.php?id=11444">Name</a></div>
    <div class="clear table">
        <div class="tr">
            <div class="td"><div class="icon_32"><img src="images/flags/DE.png"></div></div>
            <div class="td"><div class="icon_32 type_sprite spr_ASN"></div></div>
            <div class="td"><div class="icon_32"><img src="images/site/web_32.png"></a></div></div>
            <div class="td mid"><div class="bearing icon_32 bearing_N"></div></div>
            <div class="td mid"><div class="distance">0kM</div></div>
            <div class="td"><div class="trigger icon_32"></div></div>
        </div>
    </div>
    <div class="hidden">
        <ul>
            <li>List of features</li>
        </ul>
    </div>  
</div>

这是我的jQuery，你可以看到我尝试过的各种各样的东西都无济于事。

$(document).ready(function(){
        $('.hidden').hide();

        $('.trigger').click(function()
                {
                $(this).toggleClass('active');
                //$(this).next().next().toggle();
                //$(this).nextAll('.hidden').toggle();
                //$(".record").next(".hidden").toggle();
                $(".record").nextAll(".hidden").toggle();
                }
        );
});

具有“触发器”类的div应该打开具有“隐藏”类的div，理想情况下，关闭任何其他具有隐藏现在可见的类。有人可以指出我正确的方向吗？

Answer 1

$(document).ready(function(){
    $('.hidden').hide();

    $('.trigger').click(function() {
        var el = $(this).toggleClass('active')
                        .closest('.record')
                        .find('.hidden').toggle();

        $('.hidden:visible').not(el).hide();
    });
});

FIDDLE

Answer 2

$(document).ready(function () {
    $('.hidden').hide();

    var $recs = $(".record"),
        $hiddens = $recs.find(".hidden"),
        $triggers = $recs.find(".trigger");
    $('.trigger').click(function () {
        $(this).toggleClass('active');

        var $rec = $(this).closest('.record');
        var $hidden = $rec.find('.hidden').toggle();

        $hiddens.not($hidden).hide();
        $triggers.not(this).removeClass('active')
    });
});

演示：Fiddle

Answer 3

如果找到父记录，然后找到应该工作的隐藏子项：

    $('.trigger').click(function() {
            $(this).parent('.record').find('.hidden').toggle();
    );

Answer 4

$(document).ready(function(){
    $('.hidden').hide();

    $('.trigger').click(function() {
        $('.hidden').hide();
        $(this).toggleClass('active').closest('.record').find('.hidden').toggle();
    });
});

这会隐藏所有.hidden div，然后当点击一个触发器时，它会再次隐藏它们，查看触发器并找到距离dom树最近的.record，找到{{ 1}}在其中，然后切换它的可见性。

切换不是兄弟姐妹的div

4 个答案: