jquery toggle slide只有第一次没有正确滑动
jquery toggle slide does not slide correctly only the first time
那是我的代码笔:http://codepen.io/helloworld/pen/pvPzLa
当您按下 left/right 人字形按钮滑动时 div 没有向右滑动,而是第一次从右向左滑动。
我知道原因是我最初将可见性 属性 设置为 hidden/collapse。
当用户单击滑动按钮时,我从要滑动的 div 中删除可见性属性。
如何解决错误的行为?
HTML
<div id="availableOptionsSidebar" style="background-color:pink;" class="col-lg-1">
<div id="availableOptionSidebarContainer" style="text-align:center;display: table;z-index:100000;background-color:orange;">
<span id="availableOptionSidebarContainerOpener" style="cursor:pointer;font-size:2em;display:table-cell;vertical-align:middle;" class="glyphicon glyphicon-chevron-left"></span>
<div style="position:relative;height:100%;">
<div id="availableOptionsContainer" style="position:absolute;height:100%;width:180px;border:black solid 1px;background-color:red;">
<div>
<span style="cursor:pointer;font-size:2em;display:table-cell;vertical-align:middle;" class="glyphicon glyphicon-chevron-left"></span>
<span style="cursor:pointer;font-size:2em;display:table-cell;vertical-align:middle;" class="glyphicon glyphicon-chevron-right"></span>
</div>
<div>
<div class="row">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="row">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="row">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</div>
</div>
</div>
</div>
</div>
JAVASCRIPT
$(function () {
$('#parameterContainer').height(400);
$('#availableOptionSidebarContainer').height(400);
$('#availableOptionsContainer').css('visibility', 'hidden');
$('#availableOptionSidebarContainer').click(function () {
$('#availableOptionsContainer').css('visibility', "");
if ($("#availableOptionSidebarContainerOpener").is(".glyphicon-chevron-left")) { // sidebar is closed
$("#availableOptionSidebarContainerOpener").removeClass("glyphicon-chevron-left");
$("#availableOptionSidebarContainerOpener").addClass("glyphicon-chevron-right");
}
else { // sidebar is openend
$("#availableOptionSidebarContainerOpener").removeClass("glyphicon-chevron-right");
$("#availableOptionSidebarContainerOpener").addClass("glyphicon-chevron-left");
}
// Set the effect type
var effect = 'slide';
// Set the options for the effect type chosen
var options = { direction: 'left' };
// Set the duration (default: 400 milliseconds)
var duration = 500;
$('#availableOptionsContainer').toggle(effect, options, duration);
});
});
可能您想将 display: none
而不是 visibility
属性 设置为 #availableOptionsContainer
。
仅供参考:使用 jQuery 你可以 toggle multiple classes。而不是你的演示中的这种混乱
if ($("#availableOptionSidebarContainerOpener").is(".glyphicon-chevron-left")) {
// sidebar is closed
$("#availableOptionSidebarContainerOpener").removeClass("glyphicon-chevron-left");
$("#availableOptionSidebarContainerOpener").addClass("glyphicon-chevron-right");
$("#availableOptionSidebarContainerOpener").removeClass("rotateIn");
$("#availableOptionSidebarContainerOpener").addClass("rotateOut");
}
else {
// sidebar is openend
$("#availableOptionSidebarContainerOpener").removeClass("glyphicon-chevron-right");
$("#availableOptionSidebarContainerOpener").addClass("glyphicon-chevron-left");
$("#availableOptionSidebarContainerOpener").addClass("rotateIn");
$("#availableOptionSidebarContainerOpener").removeClass("rotateOut");
}
你可以做到
$("#availableOptionSidebarContainerOpener").toggleClass("glyphicon-chevron-right glyphicon-chevron-left rotateIn rotateOut");
并且不要忘记在您的 HTML 处设置初始 rotateIn
class。
那是我的代码笔:http://codepen.io/helloworld/pen/pvPzLa
当您按下 left/right 人字形按钮滑动时 div 没有向右滑动,而是第一次从右向左滑动。
我知道原因是我最初将可见性 属性 设置为 hidden/collapse。
当用户单击滑动按钮时,我从要滑动的 div 中删除可见性属性。
如何解决错误的行为?
HTML
<div id="availableOptionsSidebar" style="background-color:pink;" class="col-lg-1">
<div id="availableOptionSidebarContainer" style="text-align:center;display: table;z-index:100000;background-color:orange;">
<span id="availableOptionSidebarContainerOpener" style="cursor:pointer;font-size:2em;display:table-cell;vertical-align:middle;" class="glyphicon glyphicon-chevron-left"></span>
<div style="position:relative;height:100%;">
<div id="availableOptionsContainer" style="position:absolute;height:100%;width:180px;border:black solid 1px;background-color:red;">
<div>
<span style="cursor:pointer;font-size:2em;display:table-cell;vertical-align:middle;" class="glyphicon glyphicon-chevron-left"></span>
<span style="cursor:pointer;font-size:2em;display:table-cell;vertical-align:middle;" class="glyphicon glyphicon-chevron-right"></span>
</div>
<div>
<div class="row">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="row">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="row">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</div>
</div>
</div>
</div>
</div>
JAVASCRIPT
$(function () {
$('#parameterContainer').height(400);
$('#availableOptionSidebarContainer').height(400);
$('#availableOptionsContainer').css('visibility', 'hidden');
$('#availableOptionSidebarContainer').click(function () {
$('#availableOptionsContainer').css('visibility', "");
if ($("#availableOptionSidebarContainerOpener").is(".glyphicon-chevron-left")) { // sidebar is closed
$("#availableOptionSidebarContainerOpener").removeClass("glyphicon-chevron-left");
$("#availableOptionSidebarContainerOpener").addClass("glyphicon-chevron-right");
}
else { // sidebar is openend
$("#availableOptionSidebarContainerOpener").removeClass("glyphicon-chevron-right");
$("#availableOptionSidebarContainerOpener").addClass("glyphicon-chevron-left");
}
// Set the effect type
var effect = 'slide';
// Set the options for the effect type chosen
var options = { direction: 'left' };
// Set the duration (default: 400 milliseconds)
var duration = 500;
$('#availableOptionsContainer').toggle(effect, options, duration);
});
});
可能您想将 display: none
而不是 visibility
属性 设置为 #availableOptionsContainer
。
仅供参考:使用 jQuery 你可以 toggle multiple classes。而不是你的演示中的这种混乱
if ($("#availableOptionSidebarContainerOpener").is(".glyphicon-chevron-left")) {
// sidebar is closed
$("#availableOptionSidebarContainerOpener").removeClass("glyphicon-chevron-left");
$("#availableOptionSidebarContainerOpener").addClass("glyphicon-chevron-right");
$("#availableOptionSidebarContainerOpener").removeClass("rotateIn");
$("#availableOptionSidebarContainerOpener").addClass("rotateOut");
}
else {
// sidebar is openend
$("#availableOptionSidebarContainerOpener").removeClass("glyphicon-chevron-right");
$("#availableOptionSidebarContainerOpener").addClass("glyphicon-chevron-left");
$("#availableOptionSidebarContainerOpener").addClass("rotateIn");
$("#availableOptionSidebarContainerOpener").removeClass("rotateOut");
}
你可以做到
$("#availableOptionSidebarContainerOpener").toggleClass("glyphicon-chevron-right glyphicon-chevron-left rotateIn rotateOut");
并且不要忘记在您的 HTML 处设置初始 rotateIn
class。