如何将“slideup()”和“slidedown()”函数应用于可折叠的 Jquery Mobile 1.4.5？小提琴手
Posted
技术标签:
【中文标题】如何将“slideup()”和“slidedown()”函数应用于可折叠的 Jquery Mobile 1.4.5？小提琴手【英文标题】：How do I apply the "slideup()" and "slidedown()" function to a , Jquery Mobile 1.4.5, collapsible? JFIDDLE 【发布时间】：2017-12-11 09:39:03 【问题描述】：更新 我意识到我需要使用 slideToggle() 并放弃可折叠。 这是一个更新..但我觉得它是一个黑客，使用两个按钮。有没有办法用一个按钮完成相同的外观？
FIDDLE UPDATE
***原创*** 我希望可折叠的打开速度较慢，关闭速度较慢。
我见过一些较旧的解决方案，但自 JQM 1.3 以来没有。
提前谢谢你。
另外，我真的希望我可以触摸并滑动打开菜单。
这是我尝试应用的示例。
Jfiddle of what I want to apply
这是我的菜单 Jfiddle Collapsible
这里是代码，减去 CSS。
<!---------Collapsible (OPEN)--------------------->
<!------------------------------------------------>
<!------------------------------------------------>
<div data-inset="false" class="weight_collapsible" id="weight_collapsible" data-role="collapsible" style="
padding: 0px;
margin: 0px;
z-index: 998;
width: 100%;
position: fixed;
bottom: 50px;
display:<?=$menulist?>;">
<h4>More Weight</h4>
<!-- WEIGHT SCALE - (OPEN) -->
<!------------------------------------------------>
<!------------------------------------------------>
<fieldset id="custom-fieldset" class="" data-role="controlgroup" data-inset="false" style="
width: 100%;
padding: 0px;
margin: 0px;
font-variant: small-caps;
letter-spacing: 1px;
border-radius: 0px;
display:<?=$menulist?>; ">
<!-- 1 GRAM - WEIGHT INPUT -->
<!------------------------------------------------>
<!------------------------------------------------>
<input class="weight1" type="hidden" value="1" >
<!-- 1 GRAM - CHECKBOX - PRICE INPUT -->
<!------------------------------------------------>
<input class="price1" type="radio" name="radio-choice-v-2" id="radio-choice-v-2a" value="15" checked="checked" style="
font-variant: small-caps;
letter-spacing: 1px;
border-radius: 0px;">
<!-- 1 GRAM - LABEL - FLEX -->
<!------------------------------------------------>
<label class="price_weight_lable1" for="radio-choice-v-2a" style="
display: flex;
line-height: 35px;
font-size: 12px;
-webkit-text-stroke: 0.10px;">
<!-- 1 GRAM - SIZE - COLUMN LEFT -->
<div style="
flex:2;
text-indent:20px;">
1 G
</div>
<!-- 1 GRAM - PRICE - COLUMN RIGHT -->
<div style="flex:1;text-align: center;">
15.00
</div>
</label>
<!------------------------------------------------>
<!------------------------------------------------>
<!-- 1 GRAM WEIGHT -->
<!-- 2 GRAM - WEIGHT INPUT -->
<!------------------------------------------------>
<!------------------------------------------------>
<input class="weight2" type="hidden" value="2" >
<input class="price2" type="radio" name="radio-choice-v-2" id="radio-choice-v-2b" value="30">
<label class="price_weight_lable1" style="display:flex;line-height: 35px;font-size: 12px;-webkit-text-stroke: 0.10px;" for="radio-choice-v-2b">
<div style="flex:2;text-indent:20px;">2 G</div>
<div style="flex:1;text-align: center;">$30</div>
</label>
<!------------------------------------------------>
<!------------------------------------------------>
<!-- 2 GRAM WEIGHT -->
<!-- 3.5 GRAM - WEIGHT INPUT -->
<!------------------------------------------------>
<!------------------------------------------------>
<input class="weight3" type="hidden" value="3.5" >
<input class="price3" type="radio" name="radio-choice-v-2" id="radio-choice-v-2c" value="50">
<label class="price_weight_lable1" style="display:flex;line-height: 35px;font-size: 12px;-webkit-text-stroke: 0.10px;" for="radio-choice-v-2c">
<div style="flex:2;text-indent:20px;">3.5 G</div>
<div style="flex:1;text-align: center;">$50</div>
</label>
<!------------------------------------------------>
<!------------------------------------------------>
<!-- 3.5 GRAM WEIGHT -->
<!-- 7 GRAM - WEIGHT INPUT -->
<!------------------------------------------------>
<!------------------------------------------------>
<input class="weight4" type="hidden" value="7" >
<input class="price4" type="radio" name="radio-choice-v-2" id="radio-choice-v-2d" value="90">
<label class="price_weight_lable1" style="display:flex;line-height: 35px;font-size: 12px;-webkit-text-stroke: 0.10px;" for="radio-choice-v-2d">
<div style="flex:2;text-indent:20px;">7</div>
<div style="flex:1;text-align: center;">$90.00</div>
</label>
<!------------------------------------------------>
<!------------------------------------------------>
<!-- 7 GRAM WEIGHT -->
<!-- 14 GRAM - WEIGHT INPUT -->
<!------------------------------------------------>
<!------------------------------------------------>
<input class="weight5" type="hidden" value="14" >
<input class="price5" type="radio" name="radio-choice-v-2" id="radio-choice-v-2e" value="160.00">
<label class="price_weight_lable1" style="display:flex;line-height: 35px;font-size: 12px;-webkit-text-stroke: 0.10px;" for="radio-choice-v-2e">
<div style="flex:2;text-indent:20px;">14 G</div>
<div style="flex:1;text-align: center;">$160.00</div>
</label>
<!------------------------------------------------>
<!------------------------------------------------>
<!-- 14 GRAM WEIGHT -->
<!-- 28 GRAM - WEIGHT INPUT -->
<!------------------------------------------------>
<!------------------------------------------------>
<input class="weight6" type="hidden" value="28" >
<input class="price6" type="radio" name="radio-choice-v-2" id="radio-choice-v-2f" value="300.00">
<label class="price_weight_lable1" style="display:flex;line-height: 35px;font-size: 12px;-webkit-text-stroke: 0.10px;" for="radio-choice-v-2f">
<div style="flex:2;text-indent:20px;">28 G</div>
<div style="flex:1;text-align: center;">$300.00</div>
</label>
<!------------------------------------------------>
<!------------------------------------------------>
<!-- 28 GRAM WEIGHT -->
</fieldset>
<!------------------------------------------------>
<!------------------------------------------------>
<!-- WEIGHT SCALE INPUTS (CLOSED) ---------------->
</div>
<!------------------------------------------------>
<!------------------------------------------------>
<!-- WEIGHT SCALE - COLAPSABLE (CLOSED) -->
<!-- BOTTOM - BUTTON (OPEN) -->
<!------------------------------------------------>
<!------------------------------------------------>
<button data-role="none" class="item_add" style="
display:flex;
border: none;
color: #fff;
position: fixed;
left: 0;
bottom: 0;
text-shadow: none;
height: 50px;
width: 100%;
background: rgba(89,151,85,0.95);
z-index: 999;
box-shadow:0 -2px 3px rgba(0,0,0,.25);
font-size: 12px;
line-height: 50px;
letter-spacing: 1px;
-webkit-text-stroke: 0.30px;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;">
<!-- BOTTOM - BUTTON LEFT (OPEN) -->
<!------------------------------------------------>
<div class="" style="
min-width: 60px;
padding-left: 10px;
text-align: left;" >
<span class="weight_results"></span> G
</div>
<!------------------------------------------------>
<!-- BOTTOM - BUTTON - LEFT (CLOSED) -->
<!-- BOTTOM - BUTTON - CENTER (OPEN) -->
<!------------------------------------------------>
<div style="
flex: 1;
font-size: 14px;
-webkit-text-stroke: 0.65px;" >
Add to Cart
</div>
<!------------------------------------------------>
<!-- BOTTOM - BUTTON - CENTER (CLOSED) -->
<!-- BOTTOM - BUTTON - RIGHT (OPEN) -->
<!------------------------------------------------>
<div class="" style="
padding-right: 10px;
text-align: right;
min-width: 60px; ">
$<span class="price_results "></span>
</div>
<!------------------------------------------------>
<!-- BOTTOM - BUTTON - RIGHT (CLOSED) -->
</button>
<!------------------------------------------------>
<!------------------------------------------------>
<!-- BOTTOM - BUTTON (CLOSED) -->
<!-- HIDDEN - ITEM - INPUTS (OPEN) -->
<!------------------------------------------------>
<!------------------------------------------------>
<div style="display: none;" class="item_quantity"><div style="display: none;" class="quantity_results"></div></div>
<div style="display: none;" class="item_price">
<div style="display: none;" class="price_results"></div></div>
<div style="display: none;" class="item_weight">
<!------------------------------------------------>
<!------------------------------------------------>
<!-- HIDDEN - ITEM - INPUTS (CLOSED) -->
还有..这是脚本。
$(document).on('collapse', '.ui-collapsible', function()
$(this).children().next().slideUp(200);
);
$(document).ready(function()
$(".ui-collapsible-content").click(function()
$( ".weight_collapsible" ).collapsible( "collapse" );
);
);
$( 文档 ).ready(function()
$( '.price_results' ).text( ($(".price1").val()) );
$( '.weight_results' ).text(($(".weight1").val()) );
);
$('input[type=radio]').on( 'change', function(el)
$( '.weight_results' ).text( $(this).parent().prev().val()*1 );
$( '.price_results' ).text( $(this).val()*1 );
);
【问题讨论】：
【参考方案1】：问：有没有办法用一个按钮完成相同的外观？
这是可能的，但我不确定这样做是否有更好的方法。
调整 CSS：
.scale
height: 5px;
position: absolute;
bottom: 100px;
width: 100%;
overflow:hidden;
.btn1
position: absolute;
bottom: 50px;
width: 100%;
调整 JS：
$( ".btn1" ).click(function()
if ($(".scale").hasClass("shown"))
$( ".scale" ).animate("height":0, 250, function()
$(".scale").toggleClass("shown", false);
);
else
$( ".scale" ).animate("height":320, 250, function()
$(".scale").toggleClass("shown", true);
);
);
工作小提琴：https://jsfiddle.net/h145kqrf/23/
旁注：
你的 CSS 太重了，我的 Chrome 根本无法获得任何 FPS！
【讨论】：
以上是关于如何将“slideup()”和“slidedown()”函数应用于可折叠的 Jquery Mobile 1.4.5？小提琴手的主要内容，如果未能解决你的问题，请参考以下文章
jQuery slideUp 和 slideDown 正在提供弹跳效果
slideToggle() 可以检测 SlideUp 还是 SlideDown？
jQuery：下拉导航 slideDown 和 slideUp