Question

我使用jquery UI折叠效果作为切换中的参数，如下所示：

$(textDivChild).toggle( "fold");

效果很好，我只有一个问题。 div从右到左折叠而不是从左到右折叠，这就是我想要的。而且我没有在options对象中看到方向选项......我尝试了各种其他方法，如slide，slideUp（在jquery核心中）和slideDown，但它们都没有做我想要的。如果幻灯片有一个方向选项滑动“向上”而不是“向上”，我可以使用它。我的最终目标是让容器看起来像是折叠/扩展进出按钮 - 只要我可以反转方向，折叠就会很好用。

另外，我尝试将div与相对/绝对定位对齐，但它对方向没有影响。我无论如何都无法做到这一点，因为我无法正确定位，因为我在应用程序的基础上执行此操作...我无论如何只能使用“left”和“top”CSS定位。

Answer 1

使用CSS，您可以使用float属性将其设为look like it's folding to the right。

#textDivChild {
    float: right;
}

所有这一切都是对齐一切正确，所以即使动画发生与以前完全相同，它也会显得好像向右折叠。

Answer 2

你可以做到。您只需要使用一些特殊的CSS格式。

我所做的是建立一个“位置：绝对;”并用“右/上/左/下”指出位置。

如果您设置左侧 - 它将从左侧开始
如果您设置正确 - 它将从右侧开始
如果您设置顶部 - 它将从顶部
如果您设置底部 - 它将从底部开始

您还可以决定首先开始的内容 - 水平或垂直

$('#hover_settings').toggle({effect: "fold", horizFirst: false}, 500);

或

$('#hover_settings').toggle({effect: "fold", horizFirst: true}, 500);

最后一个参数显然是 - 效果的时间。：）

jsfiddle

$(function() {
    function t(){
         $('#hover_settings')
        .toggle({effect: "fold", horizFirst: false}, 500);
    }
    
    
$('#button_settings1').click(function(){
    $('#hover_settings')
        .css('left','1.4em')
        .css('bottom','3em')
        .css('right','initial')
        .css('top','initial')    
   t(); 
});

$('#button_settings2').click(function(){
        $('#hover_settings')
        .css('right','2em')
        .css('top','2em')
        .css('left','initial')
        .css('bottom','initial')
   t(); 
});

    
});

#settings_wrapper{
	position:relative;
	background: aliceblue;
	display:inline-block;

}

#hover_settings{
	position: absolute;
	/*right: -20em;
	top: -6em;*/
	background: antiquewhite;
	border-radius: 20px;
	border: 2px solid #ccc;
	width: 10em;
	height: 5em;
	text-align: center;	
	display: none;
	/*left: 1.4em;*/
	/*bottom: 3em;*/
}

<link href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<br><br><br><br><br><br>        
<div id='settings_wrapper'>
    <button id='button_settings1'>btn1</button>
    ..............................................
    <button id='button_settings2'>btn2</button>
    <div id='hover_settings'>
        Settings
    </div>
</div>

如何反转jquery UI折叠效果的方向？

2 个答案: