使jQuery.show()和.hide()并排运行,并产生UI效果
我试图在jquery中制作一个具有滑动效果的漂亮菜单: 请注意,如果你点击football,菜单会向左滑动,另一个从右侧滑动,但它们会一个接一个地出现,而不是并排出现 尝试了很多东西,display:inline和使用delay()与jQuery队列,但问题是CSS,我认为,nut jQuery。。。有什么想法吗?添加 位置:绝对位置;宽度:100%; 在这样的容器中:使jQuery.show()和.hide()并排运行,并产生UI效果,jquery,css,jquery-ui,slide,Jquery,Css,Jquery Ui,Slide,我试图在jquery中制作一个具有滑动效果的漂亮菜单: 请注意,如果你点击football,菜单会向左滑动,另一个从右侧滑动,但它们会一个接一个地出现,而不是并排出现 尝试了很多东西,display:inline和使用delay()与jQuery队列,但问题是CSS,我认为,nut jQuery。。。有什么想法吗?添加 位置:绝对位置;宽度:100%; 在这样的容器中: <div id="sideBar"> <div id="sideHead">TICKET M
<div id="sideBar">
<div id="sideHead">TICKET MENU</div>
<hr id="sideHeadSeperator">
<div class="sideItemContainer" id="parentSidebar" style="position:absolute;width:100%; ">
<div class="sideItem sidebarMover" name="football">Football<i class="fa fa-caret-right"></i></div>
<div class="sideItem sidebarMover" name="tennis">Tennis<i class="fa fa-caret-right"></i></div>
<div class="sideItem">Rugby<i class="fa fa-caret-right"></i></div>
<div class="sideItem">Basketball<i class="fa fa-caret-right"></i></div>
</div>
<div class="sideItemContainer" id="footballSidebar" style="display: none;position:absolute; ;width:100%;" >
<div class="sideItem">Arsenal<i class="fa fa-caret-right"></i></div>
<div class="sideItem">Chelsea<i class="fa fa-caret-right"></i></div>
<div class="sideItem">Liverpool<i class="fa fa-caret-right"></i></div>
<div class="sideItem">Manchester Utd<i class="fa fa-caret-right"></i></div>
<div class="sideItem">Manchester City<i class="fa fa-caret-right"></i></div>
<div class="goBack"><i class="fa fa-caret-left fa-inverse"></i> go back</div>
</div>
<div class="sideItemContainer" id="tennisSidebar" style="display: none;">
<div class="sideItem">Wimbledon<i class="fa fa-caret-right"></i></div>
<div class="sideItem">Rome Masters<i class="fa fa-caret-right"></i></div>
<div class="sideItem">US Open<i class="fa fa-caret-right"></i></div>
<div class="sideItem">Roland Garros<i class="fa fa-caret-right"></i></div>
<div class="sideItem">Madrid Masters<i class="fa fa-caret-right"></i></div>
<div class="goBack"><i class="fa fa-caret-left fa-inverse"></i> go back</div>
</div>
</div>
门票菜单
足球
网球
橄榄球
篮球
兵工厂
切尔西
利物浦
曼联
曼彻斯特城
回去
温布尔登
罗马大师赛
美国公开赛
法国网球公开赛
马德里大师赛
回去
这是因为div的宽度为100%,你现在必须考虑宽度和浮动leftOK,这很好,但是:它下面的div现在覆盖了这个菜单,知道吗?如果主题已解决,请输入1,并在这个答案上指示主题已解决。我不太明白你的新问题。
<div id="sideBar">
<div id="sideHead">TICKET MENU</div>
<hr id="sideHeadSeperator">
<div class="sideItemContainer" id="parentSidebar" style="position:absolute;width:100%; ">
<div class="sideItem sidebarMover" name="football">Football<i class="fa fa-caret-right"></i></div>
<div class="sideItem sidebarMover" name="tennis">Tennis<i class="fa fa-caret-right"></i></div>
<div class="sideItem">Rugby<i class="fa fa-caret-right"></i></div>
<div class="sideItem">Basketball<i class="fa fa-caret-right"></i></div>
</div>
<div class="sideItemContainer" id="footballSidebar" style="display: none;position:absolute; ;width:100%;" >
<div class="sideItem">Arsenal<i class="fa fa-caret-right"></i></div>
<div class="sideItem">Chelsea<i class="fa fa-caret-right"></i></div>
<div class="sideItem">Liverpool<i class="fa fa-caret-right"></i></div>
<div class="sideItem">Manchester Utd<i class="fa fa-caret-right"></i></div>
<div class="sideItem">Manchester City<i class="fa fa-caret-right"></i></div>
<div class="goBack"><i class="fa fa-caret-left fa-inverse"></i> go back</div>
</div>
<div class="sideItemContainer" id="tennisSidebar" style="display: none;">
<div class="sideItem">Wimbledon<i class="fa fa-caret-right"></i></div>
<div class="sideItem">Rome Masters<i class="fa fa-caret-right"></i></div>
<div class="sideItem">US Open<i class="fa fa-caret-right"></i></div>
<div class="sideItem">Roland Garros<i class="fa fa-caret-right"></i></div>
<div class="sideItem">Madrid Masters<i class="fa fa-caret-right"></i></div>
<div class="goBack"><i class="fa fa-caret-left fa-inverse"></i> go back</div>
</div>
</div>