2

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

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

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

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

4

2 回答 2

0

你能行的。您只需要使用一些特殊的 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>

于 2014-10-28T22:44:47.113 回答
0

Using CSS, you could use the float attribute to make it look like it's folding to the right.

#textDivChild {
    float: right;
}

All this does is align everything right so even though the animation is happening exactly the same as before, it will appear as though it's folding to the right.

于 2013-10-22T14:59:16.767 回答