Question

以下是我正在做的工作小提琴的链接：https://jsfiddle.net/yfe7ky3x/

我正在创建一个简单的投资组合网站，我想有图片，这里用白色背景占位符div表示，点击后，展开一个隐藏的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

正如评论中所建议的那样，你可以这样做：
所有图片都会获得课程picture，所有图片都隐藏有课程hiddenInfos，而您的图片ID为one，two等...而您隐藏的div有{ID {1} 1}}，hidden_one等...

hidden_two

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/

我链接错误的链接：）

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

^ ==＆gt;选择器以。开头 $ ==＆gt; selectro以..结束。

Answer 3

我只是为隐藏的div添加一个包装器，并为它们添加一个类：

$(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()来确定内容和点击事件按钮之间的链接，并检查已打开的内容是否必须重新打开点击其按钮

您也可以通过这种方式清除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上使用jquery .slideToggle而不是我当前的代码？

4 个答案: