我试图通过使用toggle()jquery函数来隐藏侧边栏。
代码:
$('#hide_saved_templates').click(function(){
$('#saved_templates').toggle('slow');
var jobWrapper = $('#job_form_wrapper');
if(jobWrapper.hasClass('col-md-7'))
{
jobWrapper.removeClass('col-md-7');
$('#hide_saved_templates').removeClass('glyphicon-backward');
$('#hide_saved_templates').addClass('glyphicon-forward');
jobWrapper.addClass('col-md-9');
}
else if(jobWrapper.hasClass('col-md-10'))
{
jobWrapper.removeClass('col-md-10');
$('#hide_saved_templates').removeClass('glyphicon-backward');
$('#hide_saved_templates').addClass('glyphicon-forward');
jobWrapper.addClass('col-md-12');
}
else if(jobWrapper.hasClass('col-md-12')){
jobWrapper.removeClass('col-md-12');
$('#hide_saved_templates').removeClass('glyphicon-forward');
$('#hide_saved_templates').addClass('glyphicon-backward');
jobWrapper.addClass('col-md-10');
}
else {
jobWrapper.removeClass('col-md-9');
$('#hide_saved_templates').removeClass('glyphicon-forward');
$('#hide_saved_templates').addClass('glyphicon-backward');
jobWrapper.addClass('col-md-7');
}
});
$('#hide_job_history').click(function(){
$('#jobs_history').toggle('slow');
var jobWrapper = $('#job_form_wrapper');
if(jobWrapper.hasClass('col-md-7'))
{
jobWrapper.removeClass('col-md-7');
$('#hide_job_history').removeClass('glyphicon-forward');
$('#hide_job_history').addClass('glyphicon-backward');
jobWrapper.addClass('col-md-10');
}
else if(jobWrapper.hasClass('col-md-10'))
{
jobWrapper.removeClass('col-md-10');
$('#hide_job_history').removeClass('glyphicon-backward');
$('#hide_job_history').addClass('glyphicon-forward');
jobWrapper.addClass('col-md-7');
}
else if(jobWrapper.hasClass('col-md-9')){
jobWrapper.removeClass('col-md-9');
$('#hide_job_history').removeClass('glyphicon-forward');
$('#hide_job_history').addClass('glyphicon-backward');
jobWrapper.addClass('col-md-12');
}
else if(jobWrapper.hasClass('col-md-12')){
jobWrapper.removeClass('col-md-12');
$('#hide_job_history').removeClass('glyphicon-backward');
$('#hide_job_history').addClass('glyphicon-forward');
jobWrapper.addClass('col-md-9');
}
});
切换工作正常并按预期切换侧边栏。但是,切换('慢')的默认缓动动画适用于一个侧边栏$('#saved_templates').toggle('slow')
而不适用于另一个$('#jobs_history').toggle('slow');
。我对两个侧边栏使用了相同的代码,但我无法理解这种不一致的原因。我想将平滑的简单过渡应用于切换效果。
HTML结构:
<div class="row">
<div class="col-md-2 no-padding show-templates-outer-wrapper" id="saved_templates" style="display: none;"></div>
<div class="no-padding col-md-12" id="job_form_wrapper">
<span id="hide_saved_templates" class="glyphicon glyphicon-forward" style="cursor: pointer;"></span>
<span id="hide_job_history" style="position: absolute; right: 5px; cursor: pointer;" class="glyphicon glyphicon-forward"></span>
</div>
<div class="col-md-3 no-padding show-jobs-history-outer-wrapper" id="jobs_history" style="display: none;"></div>
</div>
答案 0 :(得分:1)
问题是toggle
,同时更改班级。由于jobs_history
div
位于最后位置,因此toggle
事件不会影响其他人。以下代码段可能会对您有所帮助。
var saved_templates = $('#saved_templates');
var jobs_history = $('#jobs_history');
$('#hide_saved_templates').click(function() {
if (saved_templates.is(':visible')) {
saved_templates.hide('slow', function() {
jobs_history.show();
});
} else {
jobs_history.hide();
saved_templates.show('slow');
}
$(this).toggleClass('glyphicon-backward glyphicon-forward');
});
$('#hide_job_history').click(function() {
if (jobs_history.is(':visible')) {
jobs_history.hide();
saved_templates.show('slow');
} else {
saved_templates.hide('slow', function() {
jobs_history.show();
});
}
$(this).toggleClass('glyphicon-backward glyphicon-forward');
});
&#13;
#saved_templates, #jobs_history, #job_form_wrapper {
border: 1px solid #000;
height: 20px;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-2 no-padding show-templates-outer-wrapper" id="saved_templates" style="display: none;"></div>
<div class="no-padding col-md-10" id="job_form_wrapper">
<span id="hide_saved_templates" class="glyphicon glyphicon-forward" style="cursor: pointer;"></span>
<span id="hide_job_history" style="position: absolute; right: 5px; cursor: pointer;" class="glyphicon glyphicon-forward"></span>
</div>
<div class="col-md-2 no-padding show-jobs-history-outer-wrapper" id="jobs_history" style="display: none;"></div>
</div>
&#13;
在整页中查看结果。