在多个隐藏的 div 上使用 elegant/simpler .slideToggle 的方法是否比我当前的代码更多？

Question

这是我正在做的工作 fiddle 的 link：https://jsfiddle.net/yfe7ky3x/

我正在创建一个简单的作品集网站，我想要一些图片，这里用白色背景占位符 divs 表示，单击时展开一个隐藏的 div，其中将包含更多信息在项目上。

jQuery:

        $(function () {

        $("#one, #hiddenone").click(function(){
            $("#hiddentwo, #hiddenthree, #hiddenfour, #hiddenfive, #hiddensix").slideUp("slow");
            $('.active').removeClass('active');
            $("#hiddenone").slideToggle("slow");
            $(this).toggleClass("active");
            return false;
        }); 

        $("#two, #hiddentwo").click(function(){
            $("#hiddenone, #hiddenthree, #hiddenfour, #hiddenfive, #hiddensix").slideUp("slow");
            $('.active').removeClass('active');
            $("#hiddentwo").slideToggle("slow");
            $(this).toggleClass("active");
            return false;
        }); 

        $("#three, #hiddenthree").click(function(){
            $("#hiddenone, #hiddentwo, #hiddenfour, #hiddenfive, #hiddensix").slideUp("slow");
            $('.active').removeClass('active');
            $("#hiddenthree").slideToggle("slow");
            $(this).toggleClass("active");
            return false;
        }); 

        $("#four, #hiddenfour").click(function(){
            $("#hiddenone, #hiddentwo, #hiddenthree, #hiddenfive, #hiddensix").slideUp("slow");
            $('.active').removeClass('active');
            $("#hiddenfour").slideToggle("slow");
            $(this).toggleClass("active");
            return false;
        }); 

        $("#five, #hiddenfive").click(function(){
            $("#hiddenone, #hiddentwo, #hiddenthree, #hiddenfour, #hiddensix").slideUp("slow");
            $('.active').removeClass('active');
            $("#hiddenfive").slideToggle("slow");
            $(this).toggleClass("active");
            return false;
        }); 

        $("#six, #hiddensix").click(function(){
            $("#hiddenone, #hiddentwo, #hiddenthree, #hiddenfour, #hiddenfive").slideUp("slow");
            $('.active').removeClass('active');
            $("#hiddensix").slideToggle("slow");
            $(this).toggleClass("active");
            return false;
        }); 

        });

这很好用，但我不禁觉得效率低得可怕。我看过一些类似 jquery 的作品，但我不明白如何将它应用到我的情况中。理想情况下，我只隐藏一个 div，我可以根据单击的项目用独特的内容替换它。

谢谢。

Answer 1

按照评论中的建议，您可以这样做：
所有的图片都有 class picture，所有隐藏的都有 class hiddenInfos，你的图片 ID 是 one，two 等...并且您的隐藏 div 具有 ID hidden_one、hidden_two 等...

    $(".picture, .hiddenInfos").click(function(){
        // please add here some code to check if it is a hidden one, so you have to substring the id to only get the number...

        // here only works on pictures, not on hidden
        pictureNumber = $(this).getId();
        // do not slide up this hidden
        $("#hidden_"+$pictureNumber).removeClass("slideUp");
        // slide up all divs with the class slideUp
        $(".slideUp").slideUp("slow");
        // give back class to slide up on next click of other picture
        $("#hidden_"+$pictureNumber).addClass("slideUp");
        // do your other stuff
        $('.active').removeClass('active');
        $("#hidden_"+$pictureNumber).slideToggle("slow");
        $(this).toggleClass("active");
        return false;
    });

Answer 2

我设法用这个代码得到它..

        $(function () {

            $('.project').on('click', function(){
                $(this).toggleClass("active");
                var currel = $( this ).attr('id') ;
                $('[id^=hidden]').slideUp("slow");
                $('[id=hidden'+ currel +']').slideDown("slow");
            });


        });

https://jsfiddle.net/mkdizajn/3smokyhe/

我link打错了link :)

https://jsfiddle.net/mkdizajn/yoou8kpv/

^ ==> 选择器以 $ ==> selectro 以..

结尾

Answer 3

我只是给隐藏的 div 添加了一个包装器，并给它们添加了一个 class :

$(function () {
    $("#projectsgrid div").click(function () {
        $('.active').slideUp("slow");
        if ($(this).index() != $("#projectHidden div.active").index()) {
            $('.active').removeClass('active');
            $("#projectHidden div").eq($(this).index()).slideToggle("slow").addClass("active");
        } else {
            $('.active').removeClass('active');
        }
    })
    $(".hidden").click(function () {
        $(this).slideUp("slow");
    });
});

在解决方案中，我使用.index()和.eq()来确定内容和点击事件按钮之间的link，并检查已经打开的内容是否有点击它的按钮重新打开

您也可以这样清除 css 代码：

.hidden{
    width: 100%;
    height: 300px;
    display: none;
    border: 1px solid black;
}

Live exemple

Answer 4

我已经编写了这个解决方案。有些人速度更快，但提供的一些解决方案无法正确处理所有情况（正如我第一眼看到的那样）。 css 也被简化了。

$(function () {

    $(".project-content").click(function () {
        $(this).slideUp("slow");
        $('#projectsgrid').find('.project[data-target=' + $(this).attr('id') + ']').removeClass('active');
        return false;
    });

    $(".project").click(function () {
        var target = $("#" + $(this).data('target'));
        $(".project-content").not(target).slideUp("slow");
        target.slideToggle("slow").toggleClass("active");
        $('.project').not(this).removeClass('active');
        return false;
    });

});

https://jsfiddle.net/vladiks/1tdaqmv8/2/

在多个隐藏的 div 上使用 elegant/simpler .slideToggle 的方法是否比我当前的代码更多？

Is there a more elegant/simpler way to use jquery .slideToggle on multiple hidden divs than my current code?

html

jquery

replace

slidetoggle