Question

（jsfiddle：http://jsfiddle.net/3o8udgpn/3/）

当有人点击一个充满按钮的指定div时，我正试图折叠（隐藏）DIV。我正在使用if，并且（仍需要添加）会将所述“collapse_button_down”的类更改为“collapse_button_up”，这应该将if呈现为false并执行'else'代码，以便所有内容都返回到正常状态。

无论如何，如上所述，我写的代码没有按预期工作。因此，请将此视为双重请求，并提出以下问题：

我在这个代码中哪里出错/哪里出错？
有没有更简单的方法来完成我上面描述的内容？

非常感谢任何帮助！

    <script> 
$(document).ready(function()
{
    if($("collapse").hasClass('collapse_btn_down')){
        $("collapse").click(function(){
                // removes the middle div
            $(".mid_div").toggle( "slow" );
                // "buurtkiezer" class will be changed to stick to the bottom of the 'content_wrap' div
            $('.buurtkiezer').toggleClass("buurtkiezer_solo");
                // content_wrap will get a new height (it's on auto by default, which would otherwise make it 0px)
            $('.content_wrap').css('height', '350px');
                // footer-wrap will get an extra margin so it stays down
            $('.footer_wrap').css('margin-top', '300');
        }};
    else{
        $("collapse").click(function(){
            $(".mid_div").toggle( "slow" );
            $('.buurtkiezer_solo').toggleClass("buurtkiezer");
            $('.content_wrap').css('height', '350px');
            $('.footer_wrap').css('margin-top', '300');             
        }};

}); 
</script>

编辑：HTML＆gt;

    <div class="content_wrap">
    <div class="buurtkiezer"><collapse><div class="collapse_btn_down"></div></collapse> </div>
        <div class="mid_div"> </div>...

Answer 1

您在加载时检查一次，因此您需要在点击时检查。此外，由于逻辑是重复的，您可以单独使用切换来压缩它（只要新类只添加新属性）：

为了提高可重用性，我重新设计了您的示例，以便它侦听任何collapse_btn_down类别元素上的点击事件，然后将更改应用于同一容器中最近的匹配元素。我让班级buurtkiezer_solo只添加新属性，所以你只需要切换那个班级。

$(function () {
    $(document).on('click', 'collapse .collapse_btn_down', function () {
        $(this).closest('.buurtkiezer').toggleClass("buurtkiezer_solo");
        $(this).closest('.content_wrap').find('.mid_div').toggle("slow");
        $('.content_wrap').css('height', '350px');
        $('.footer_wrap').css('margin-top', '300');
    });
});

JSFiddle： http://jsfiddle.net/TrueBlueAussie/3o8udgpn/6/

如果您解释整体目标以及页面的更多细节会更有帮助，但希望这可以帮助您解决眼前的问题。

如果您更喜欢标准的点击处理程序，那就是：

$('.collapse_btn_down').click(function() {

Answer 2

你出错的地方 - 逻辑的顺序。您应首先绑定click事件，然后使用if-else条件来评估被点击的元素是否具有该类：而不是反过来。

您遇到的危险是您根据运行时中的.collapse类绑定了click事件，这使其成为静态。无论情况如何，在运行时绑定click事件更有效，并在以后评估该类。

您还应该注意，您在问题中所执行的操作if / else语句完全相同，因此您可能需要重新评估您的情况，上下文或代码。

<collapse>不是合法的HTML元素。您是否尝试创建切换按钮？

$(document).ready(function() {
    $('collapse').click(function() {
        // Common function
        $(".mid_div").toggle( "slow" );
        $('.content_wrap').css('height', '350px');
        $('.footer_wrap').css('margin-top', '300');    

        // If/else
        if($(this).hasClass('collapse_btn_down')) {
            // If has class, do this
            $('.buurtkiezer').toggleClass("buurtkiezer_solo");
        } else {
            // If does not have class, do this
            $('.buurtkiezer_solo').toggleClass("buurtkiezer");
        }

    });
});

如果功能崩溃

2 个答案: