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

Question

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

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

它工作得很好，我只有一个问题。div从右到左折叠，而不是从左到右，这就是我想要的。我在options对象中看不到方向选项...我已经尝试了各种其他方法，比如slide，slideUp (在jquery核心中)和slideDown，但它们都没有达到我想要的效果。如果slide有一个方向选项，可以“向左”滑动，而不仅仅是“向上”，我可以使用它。我的最终目标是让容器看起来像是折叠/展开成按钮/展开成按钮--只要我能反转方向，fold就能很好地做到这一点。

此外，我尝试将div与相对/绝对位置进行右对齐，但对方向没有影响。我无论如何都不能做到这一点，因为我不能正确定位，因为我在上面工作的应用程序是如何工作的……我只能使用“左”和“上”CSS定位。

Answer 1

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

#textDivChild {
    float: right;
}

所有这一切都是对齐所有东西，所以即使动画发生的与以前完全相同，它看起来就像是向右折叠一样。

Answer 2

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

我所做的就是设置一个“位置:绝对”，然后用“右/上/左/下”来指向这个位置。

• 如果设置左-如果设置右，将从左开始
• -如果设置顶部，将从右开始
• -如果设置底部，将从上开始
• -将从下开始<

>F29>

您还可以决定首先从什么开始-水平还是垂直，如下所示

$('#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>

​