javascript - 如何将 "slideup()"和 "slidedown()"函数应用于 Jquery Mobile 1.4.5 可折叠？杰菲德尔

标签 javascript jquery html css jquery-mobile

更新 我意识到我需要使用 SlideToggle() 并放弃可折叠的。 这是一个更新..但我觉得它是一个黑客，使用两个按钮。有没有办法通过一个按钮来完成相同的外观？

FIDDLE UPDATE

***原版**** 我希望可折叠的打开速度慢一些，关闭速度慢一些。

我见过一些较旧的解决方案，但自 JQM 1.3 以来什么都没有。

提前谢谢您。

另外，我真的希望我可以触摸并滑动菜单来打开。

这是我尝试应用的示例。

Jfiddle of what I want to apply

这是我的菜单 Jfiddle 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>&nbsp;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);
});

$(文档).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 );
    });

最佳答案

问:有没有一种方法可以通过一个按钮实现相同的外观？

这是可能的，但我不确定是否有更好的方法。

调整 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);    
    });
  }  
});

工作 fiddle :https://jsfiddle.net/h145kqrf/23/

旁注:

你的 CSS 太重了，我的 Chrome 根本无法获得任何 FPS!

关于javascript - 如何将 "slideup()"和 "slidedown()"函数应用于 Jquery Mobile 1.4.5 可折叠？杰菲德尔，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44964850/

上一篇：javascript - Angular 4 使用 Renderer2/HostListener 来单击外部事件

下一篇：javascript - 部分JS代码阻止表单提交并保存在数据库中

相关文章：

通过for循环的javascript数组格式

javascript - PHP 登录脚本错误地显示 HTML 代码

javascript - 使用 chrome.storage.local 存储数组

javascript - JQuery 的 $ ("*"，文档)仅返回一项 : html

jquery - 需要时jqgrid中的水平滚动条

jquery - 自定义 header 的 ajax GET 不起作用 [CORS，预检]

html - 如何在表中嵌套表？

javascript - 尝试将 MediaSource 对象附加为 HTML5 视频标签的源时出现 "Not allowed to load local resource"错误

javascript - onclick 显示元素并隐藏其他元素

html - 100% 高度在下拉菜单中不起作用

©2024 IT工具网  联系我们