2

次のように、jquery UI の折りたたみ効果をトグルのパラメーターとして使用しています。

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

問題は 1 つだけです。div は、左から右ではなく、右から左に折りたたまれます。これが私が望むものです。そして、オプションオブジェクトに方向オプションが表示されません...スライド、スライドアップ（jqueryコア内）、スライドダウンなどの他のさまざまな方法を試しましたが、どれも私が望むものではありません。スライドに、単に「上」ではなく「左上」にスライドする方向オプションがあれば、それを使用できます。私の最終的な目標は、コンテナーがボタンに折りたたまれたり、ボタンから展開されたりするように見えるようにすることです。方向を逆にすることができれば、折りたたみはこれに最適です。

また、divを相対/絶対配置で右揃えしようとしましたが、方向には影響しません。とにかく、これを行っているアプリケーションが機能するため、右に配置できないため、それを行うことはできません...とにかく「左」と「上」のCSSポジショニングしか使用できません。

4

2 に答える 2

0

あなたはそれを行うことができます。特別な CSS フォーマットを使用するだけで済みます。

私がしているのは、「位置：絶対;」を設定することです。「右/上/左/下」で位置を指定します。

  • 左に設定すると、左から始まります

  • あなたが正しく設定すれば、それは右から始まります

  • top を設定すると、上から始まります

  • ボトムを設定すると、ボトムから始まります

このように、最初に何を開始するかを決定することもできます-水平または垂直

$('#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 に答える