jQuery：.click（function（）{（element），collapse（'show'，false）仅在文档单击触发器触发后禁用

时间：2015-04-10 11:08:16

标签： javascript jquery html css twitter-bootstrap

在第一次运行时，如果您在任何位置单击它激活折叠元素。我希望它只能在点击时折叠手风琴而不显示它。现在它只有在隐藏一次后才会停用

HTML

<小时/> 

<!DOCTYPE html>
<html>
    <body>
        <div class="accordion" style="z-index:9999">
            <div class="panel contact-panel">
                <div class="panel-heading accordion-toggle collapsed" role="tab" id="headingTwo" data-toggle="collapse" data-parent="#accordion" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo" style="color:#fff!important;">    <span><h5 style="margin-bottom:0!important;"><i class="fa fa-envelope">&nbsp;</i>Your Title here</h5></span>
                </div>
                <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
                    <div class="panel-body">
                        <form class="form-horizontal" role="form" method="post" action="" id="contactForm" name="contactForm">
                            <div class="form-group">
                                <label for="name" class="col-sm-3 control-label">Name</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" id="name" name="name" placeholder="First & Last Name" value="" />
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="email" class="col-sm-3 control-label">Email</label>
                                <div class="col-sm-9">
                                    <input type="email" class="form-control" id="email" name="email" placeholder="example@domain.com" value="" />
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="message" class="col-sm-3 control-label">Message</label>
                                <div class="col-sm-9">
                                    <textarea class="form-control" rows="4" name="message" placeholder="Message Content Here"></textarea>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="human" class="col-sm-3 control-label">Are You <strong><u>Human</u>?</strong>

                                </label>
                                <div class="col-sm-9">
                                    <input id="field_human" class="field_human" type="checkbox" name="human" />
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-9 col-sm-offset-3">
                                    <button id="submit" name="submit" type="submit" class="btn btn-dark btn-block btn-lg">Send</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

CSS

<小时/> 

.row > p{
    padding:2%;
    border:1px solid #eee;
    border-radius:10px;
    background:#eee;
}
.accordion {
    width:100%;
    position:fixed;
    bottom:-2.1%;
    margin-bottom:0;
    padding-bottom:0;
}
.accordion label {
    color:#fff;
}
.accordion input {
    border-radius:0;
}
.panel-heading, .panel-heading:hover, .panel-heading:focus, .panel-heading.focus, .panel-heading:active, .panel-heading.active {
    cursor:pointer;
    background-color: #c9302c;
    border-color: #ac2925;
    outline:none;
}
.accordion-toggle {
    text-align:center;
}
.accordion-toggle span:after {
    /* symbol for "opening" panels */
    font-family:'FontAwesome';
    /* essential for enabling glyphicon */
    content:"\f077";
    color: white;
    text-align:right;
    float:right;
    vertical-align:middle;
    margin-top:-4.8%;
    font-weight:700;
    font-size:120%;
}
.accordion-toggle .collapsed span:after {
    /* symbol for "collapsed" panels */
    content:"\f078";
}
.contact-panel {
    border-radius:0;
    background-color: #d9534f;
    border-color: #d43f3a;
}
.btn-dark {
    border-radius: 0;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.4);
}
.btn-dark:hover, .btn-dark:focus, .btn-dark:active, .btn-dark.active {
    color: #fff;
    background-color: rgba(0, 0, 0, 0.7);
}

的JavaScript

<小时/> 

//return all check-boxes and unchecked
var checkboxes = document.getElementsByTagName('input');

//check all check all input elements to see if they are check-boxes
for (var i = 0; i < checkboxes.length; i++) {
//If the input is a check-box run script else skip over
    if (checkboxes[i].type == 'checkbox') {
    //If it is a check-box ensure the box is unchecked
    checkboxes[i].checked = false;
    }
}

$(document).ready(function () {
//define Element by ID and create variable
    var $checked = $('#field_human');

//define default state for attribute before handler function trigger
$("#submit").attr("disabled", !$checked.checked)
//On element handler trigger define function to execute each time handler is triggered
$checked.click(function () {
    //State to define instance on method 
    if ($checked.prop('checked')) {
        //return true
        //remove element attribute state 'disabled'
        $('#submit').removeAttr('disabled');
    } else {
        //return false
        //set element attribute state 'disabled'
        $("#submit").attr("disabled", !$checked.checked);
    }
    //return to ready-state to wait for handler to trigger again
    return;
});

$(document).on('click', function (e) {
    e.stopPropagation();
    e.preventDefault();
    console.log("document.click");

    // stop document click event from firing collapse('show') event
});

//On Element jQuery mouseenter Event '.accordion' show '#collapseOne'
$('.accordion').on('mouseenter', function () {
    //Fire the Event
    $('#collapseTwo').collapse('show');
    return false; //Same as 'e.preventDefault();'
});

$('.accordion').on('click', function (e) {
    //Parent and Siblings => show (override document Click event)
    $(this + siblings).collapse('hide', false);
    //stop the code from bubbling up
    e.preventDefault();
});

//Document Click Event hide '#collapseTwo'
$(document).on('click', function (e) {
    // Target => collapse('hide').collapse('toggle')
 if($('#collapseTwo').hasClass('in') && $(e.target).closest('.form-horizontal').length==0) {
         $('#collapseTwo').collapse('hide');
    }
    //stop the code from bubbling up
    e.stopPropagation();
    e.preventDefault();
});

});

FIDDLE

3 个答案:

答案 0 :(得分：1)

您可以在隐藏

之前检查collapse元素是否具有类in 
 $(document).on('click', function (e) {
        // Target => collapse('hide')
         if($('#collapseTwo').hasClass('in') && $(e.target).closest('.form-horizontal').length==0) {
             $('#collapseTwo').collapse('hide');
        }
        //stop the code from bubbling up
        e.stopPropagation();
        e.preventDefault();
    });

Fiddle Demo

答案 1 :(得分：0)

只需评论$('#collapseTwo').collapse('hide', true);此行即可解决您的问题。

$(document).on('click', function (e) {
        // Target => collapse('hide')
       // $('#collapseTwo').collapse('hide', true); //commented this line.
        //stop the code from bubbling up
        e.stopPropagation();
        e.preventDefault();
    });

检查Fiddle.

修改

在jQuery部分中添加以下内容将解决您的问题：

$('#collapseTwo').on('click', function (e) {
        $('#collapseTwo').collapse('hide', true);
    });

更新了Fiddle.

检查以下条件：

if ($('#collapseTwo').is(':visible'))
   {
    $('#collapseTwo').collapse('hide', true);
   }

检查Fiddle.

答案 2 :(得分：0)

您无法在点击触发器上添加preventDefault()，因为它会破坏外部链接的工作。因此，我删除了防止默认设置，我所有包含easyScroll()和外部链接的链接现在都可以正常工作。有关详细信息，请参阅以下代码：

//return all check-boxes and unchecked
var checkboxes = document.getElementsByTagName('input');

//check all check all input elements to see if they are check-boxes
for (var i = 0; i < checkboxes.length; i++)
{
    //If the input is a check-box run script else skip over
    if (checkboxes[i].type == 'checkbox')
    {
        //If it is a check-box ensure the box is unchecked
        checkboxes[i].checked = false;
    }
}

$(document).ready(function()
{
    //define Element by ID and create variable
    var $checked = $('#field_human');

    //define default state for attribute before handler function trigger
    $("#submit").attr("disabled", !$checked.checked)
    //On element handler trigger define function to execute each time handler is triggered
    $checked.click(function()
    {
        //State to define instance on method 
        if ($checked.prop('checked'))
        {
            //return true
            //remove element attribute state 'disabled'
            $('#submit').removeAttr('disabled');
        }

        else
        {
            //return false
            //set element attribute state 'disabled'
            $("#submit").attr("disabled",!$checked.checked);
        }
        //return to ready-state to wait for handler to trigger again
        return;
    });

    /*$(document).on('click',function(e)
    {
        e.stopPropagation();
        e.preventDefault();
        console.log("document.click");

        // stop document click event from firing collapse('show') event
    });*/

    //On Element jQuery mouseenter Event '.accordion' show '#collapseOne'
    $('.accordion').on('mouseenter', function()
    {
        //Fire the Event
        $('#collapseTwo').collapse('show');
        return false; //Same as 'e.preventDefault();'
    });

    $('.accordion').on('click', function(e)
    {
        //Parent and Siblings => show (override document Click event)
        $(this + siblings).collapse('hide', false);
        //stop the code from bubbling up
        e.preventDefault();
    });

    //Document Click Event hide '#collapseTwo'
    $(document).on('click', function(e)
    {
        // Target => collapse('hide').collapse('toggle')
        if($('#collapseTwo').hasClass('in') && $(e.target).closest('.form-horizontal').length==0)
        {
            $('#collapseTwo').collapse('hide');
        }
        //stop the code from bubbling up
        e.stopPropagation();
        //e.preventDefault();
    });
});

您可以在我的网站上看到 Soldier-up Designs

相关问题
最新问题