フレックス:は、水平方向の表示と入力を崩壊:私は(モバイル)ページの最上部に表示された2つの検索ボックスを持っている
フォーカス上に所望の動作(すなわちボックスのいずれかの内部をクリック)であります:
- 選択ボックスが
- を展開し、他のボックスには、閉じるアイコンが右側に拡大する水平
- 崩壊します。ここで
それは遷移後のように見えるものです:
これはコードです:
<div class="navigation--mobile__search">
<div class="header-searchfield" id="kurssuche">
<input type="text" class="header-searchfield__input" placeholder="Search1">
<a href="">
<span class="icon icon--lupe">
<svg class="icon__svg">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/svg/svg-symbol.svg#lupe"></use>
</svg>
</span>
</a>
</div>
<div class="header-searchfield" id="volltextsuche">
<input type="text" class="header-searchfield__input" placeholder="Search2">
<a href="">
<span class="icon icon--lupe">
<svg class="icon__svg">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/svg/svg-symbol.svg#lupe"></use>
</svg>
</span>
</a>
</div>
<span class="icon icon--close-x header-searchfield__close-button" style="display: none;">
<svg class="icon__svg">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/svg/svg-symbol.svg#close-x"></use>
</svg>
</span>
</div>
対応LESS-クラス:
.navigation--mobile__search {
background: @common-quarks-color--cd-anthracite;
display: flex;
padding: .625rem .75rem;
position: relative;
.header-searchfield {
display: flex;
flex: 1;
&__input {
flex-grow: 1;
padding: .5625rem 2rem .5625rem .8125rem;
}
&__close-button {
flex: 0 0 1.8rem;
color: white;
display: none;
margin: .7rem 0 .7rem .5rem;
svg {
fill: @searchfield--border-color;
height: .8125rem;
width: .8125rem;
}
}
}
}
そして、javascript:
$(function() {
$("#kurssuche")
.focusin(function() {
$("#volltextsuche").hide(500);
$(".header-searchfield__close-button").show(500);
$(".navigation--mobile__search-results").animate({height: "400px"}, 500);
})
.focusout(function() {
$("#volltextsuche").show(500);
$(".header-searchfield__close-button").hide(500);
$(".navigation--mobile__search-results").animate({height: "0"}, 500);
});
$("#volltextsuche")
.focusin(function() {
$("#kurssuche").hide(500);
$(".header-searchfield__close-button").show(500);
$(".navigation--mobile__search-results").animate({height: "400px"}, 500);
})
.focusout(function() {
$("#kurssuche").show(500);
$(".header-searchfield__close-button").hide(500);
$(".navigation--mobile__search-results").animate({height: "0"}, 500);
});
$(".header-searchfield__close-button").on('click', function() {
$(".header-searchfield__input").val("");
});
});
水平崩壊の所望の動作のために
問題は、私は通常ちょうど入力してdiv要素をつかむだろう、それはこれが動作しない選択し、0に幅をアニメーション化されていない、なぜならラッパーdivはdisplay: flex
です - 私はflex:
-Attributeを実験しようとしましたが、うまくいかなかったようです。 flex-divを幅0にアニメートするトリックはありますか?
フィドル:あなたが実際にあなたがしようとしているものを達成するだけでCSSを使用することができますhttps://jsfiddle.net/amear6x0/
あなたはあまりにもスニペット/フィドルを投稿してくださいだろうか? – kukkuz
フレックスチャイルドを折り畳むには、 'min-width:0'を追加してください。それでOKです...おそらく 'overflow:hidden'を追加してください。 –
@kukkuz私はひどいことをしました:https://jsfiddle.net/amear6x0/ –