web-dev-qa-db-ja.com

slideToggle（）の動作をdisplay：blockではなくdisplay：inline-blockに変更しますか？

ターゲット slideToggle（） divは、開いているときにdisplay:inline-blockではなくdisplay:blockである必要があります。ここでjqueryの動作を変更する方法はありますか？

編集：

現時点ではjQuery 1.7.0を使用しています。また、<div>は最初はdisplay:noneにあり、リンクをクリックするとdisplay:inline-blockに展開されます。しかし、明らかにこの状況でのslideToggle（）のデフォルト状態はdisplay:block ...

jquerycssslidetoggle
37
iHaveacomputer

小さなバーディーが私に言った...

$('#my-block').slideToggle('medium', function() {
    if ($(this).is(':visible'))
        $(this).css('display','inline-block');
});
50
black

スクリプトを使用してブロックを非表示にしようとします（_display:noneスタイル経由）

HTML

<div class="ib">inline-block</div> <a href="#" class="toggle">toggle this</a>

CSS

.ib{
    display:inline-block;
    background:red;
}

JavaScript

$(".ib").hide();
$(".toggle").bind("click", function(){
    $(".ib").slideToggle();
    return false;
})

例

12
fliptheweb

orderプロパティで要素を並べ替えるには、display：flexが必要でした。 display：flexへの変更は機能しましたが、アニメーションが要素を再配置するのを待つ必要があったため、すべてが明らかに乱れているように見えた瞬間がありました。

私にとってのトリックは、開始オプションを使用することでした（ docを参照 ）：

$("your-selector").slideToggle({
  duration: 200,
  easing: "easeOutQuad",
  start: function() {
    jQuery(this).css('display','flex');
  }
});
4
Eloy Ruiz

不要な「スタイル設定されていないコンテンツのフラッシュ」が表示されている場合は、インラインスタイルを使用することもできます。 「スタイルをインラインに配置しない」という通常の知恵は、視覚効果ではなく、実際にメインのスタイリングを意味します（JS効果はすべてインラインスタイルを追加するだけです）。

もちろん、それが重要な場合、コンテンツはJSが無効な検索エンジンスパイダーには表示されません。それが重要でなければ、あなたは大丈夫です！

@flipthewebのフィドルの更新： http://jsfiddle.net/GregP/pqrdS/3/

4
Greg Pettit

古いバージョンのjQueryを使用していますか？これはすでに修正されているはずです。次の説明を参照してください。

http://bugs.jquery.com/ticket/2185

2
Alex Peattie