Jquery：全部向上滑动，单击向下滑动-如果单击已打开，请切换它..最后一点需要帮助，请

Question

我对 jQuery 还是很陌生，我知道我可以“谷歌”并在 5 分钟内启动并运行一些非常相似的东西，但我正在学习 - 我需要犯错误并提出问题！

我确信这应该可行，但最后一步没有。如果有人有办法创建这种效果或知道如何清理我的代码，那将不胜感激，但如果有人能告诉我在哪里我错了。。

    //intial load
$(document).ready(function(){

    // row has been clicked
    $(".fp_row").bind('click', function(){

        //row id has been set to item_clicked
        var item_clicked = $(this).attr('rel');
        //Item_hidden is the div that shows or hides, like accordion menu
        var item_hidden = $("#" + item_clicked + "_hide").attr('rel');

        //hide all that are open, and then toggle the one you clicked..
        $(".fp_dropdown_box").slideUp("slow", function(){
            $("#" + item_hidden + "_hide").not(".fp_dropdown_box").slideToggle("slow");
        });

    });


});

我正在制作一个带有多行标题的页面，当您单击一行时，一个 div 会滑出以显示更多信息，就像手风琴一样。我目前可以使您单击的框打开并关闭所有其他框。我可以一次打开并立即关闭。但是我无法打开一个然后如果你再次单击它会关闭它，目前它会向上滑动然后再次向下滑动。

我认为上面的代码如何工作.. 在初始加载时，当单击一行时，获取 rel 值（这是我用于每一行的唯一标识符）然后向上滑动当前打开的所有行，但不是您单击的行..

<!--- row --->
    <div id="1_row" class="fp_row clearfix" rel="1">
        <!--- time --->
        <div class="fp_col fp_col_time"><p>the time</p></div>
        <!--- title --->
        <div class="fp_col fp_col_title"><p>the title</p></div>
    </div>

    <!--- hidden information --->
    <div id="1_hide" rel="1" class="fp_dropdown_box clearfix" style="<cfif qEvents.event_id EQ url.event_id>display:;<cfelse>display:none</cfif>" > 
        <div class="fp_dropdown_content"><p>the hidden information</p></div>
    </div>

好的，在 cmets 之后，我设法让脚本有些工作 - 剩下的唯一问题是它打开然后关闭两次，然后停在我想要的状态..

更新代码。

    //intial load
$(document).ready(function(){

    // row has been clicked
    $(".fp_row").bind('click', function(){

        //The Id of the clicked Row
        var item_clicked = $(this).attr('rel');
        console.log("The ID of the clicked Row: (" + item_clicked + ")");

        //Creates variable ID for the hidden item
        var item_hidden = $("#" + item_clicked + "_hide").attr('rel');
        console.log("The Hidden Item ID (" + item_hidden + ")");

        //Creates variable to test if the hidden item is true or false.
        var item_is_hidden = $("#" + item_hidden + "_hide").css('display') == 'none';
        console.log("test if hidden item is hidden (" + item_is_hidden +")");

            //slide up all that are open
            $(".fp_dropdown_box").slideUp("slow", function(){
                //test to see if it is open: true/false
                 if(item_is_hidden)
                    {
                    console.log("condition worked!");
                    //Run the slidedown on hidden item
                        $("#" + item_hidden + "_hide").slideDown("slow");
                    }
                else
                       {
                    $("#" + item_hidden + "_hide").slideUp("slow");
                    }
            });
    });
});

---

这是我最后的编辑，我认为这是最干净的方式

$(document).ready(function() {

    $('div.cont > div').hide(); 

    $('div.cont> h3').click(function() {
        $(this).next('div').slideToggle('fast').siblings('div:visible').slideUp('fast');
    });
});

Answer 1

问题在于您将它们全部隐藏，然后切换单击的那个-因此它将始终显示。您需要检测它是否显示并采取适当的行动。

var item_hidden = $("#" + item_clicked + "_hide").attr('rel');
var item_is_hidden = $("#" + item_hidden + "_hide").css('display') == 'none';

$(".fp_dropdown_box").slideUp("slow", function(){
    if(item_is_hidden)
       $("#" + item_hidden + "_hide").slideToggle("slow");
});

Answer 2

1.，接受您之前问题的更多个答案。

2.，也添加HTML，这样我们就可以做一些“真正智能的重构”。