如何将“ slideup（）”和“ slidedown（）”函数应用于可折叠的Jquery Mobile 1.4.5？杰菲德

Question

UPDATE I realized I need to use slideToggle() and ditch the collapsible. 更新我意识到我需要使用slideToggle（）并放弃可折叠的东西。 here is an update.. but I feel like its a hack, using two buttons. 这是一个更新..但我觉得它很烂，使用两个按钮。 Is there a way to accomplish the same look with one button? 有没有一种方法可以通过一个按钮完成相同的外观？

FIDDLE UPDATE 内容更新

***ORIGINAL**** I would like the collapsible to open slower, and close slower. ***原始****我希望可折叠的门打开得更慢，然后关闭得更慢。

I have seen some older solutions but nothing since JQM 1.3. 我看到了一些较旧的解决方案，但是自JQM 1.3起就什么也没有。

Thank you in advance. 先感谢您。

Also, I really wish I could touch and slide the menu open. 另外，我真的希望我可以触摸并滑动打开的菜单。

Here is an example of what I am trying to apply. 这是我尝试应用的示例。

Jfiddle of what I want to apply 我想申请的东西

Here is my Jfiddle of my menu Jfiddle Collapsible 这是我的菜单Jfiddle可折叠的Jfiddle

Here is the code, minus the CSS. 这是减去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) -->

And.. here is the Script. 和..这是脚本。

$(document).on('collapse', '.ui-collapsible', function() {
    $(this).children().next().slideUp(200);
});

$(document).ready(function() { $（document）.ready（function（）{

$(".ui-collapsible-content").click(function() {
  $( ".weight_collapsible" ).collapsible( "collapse" );
});

}); }）;

$( document ).ready(function() { $（document）.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 );
    });

Answer 1

Q: Is there a way to accomplish the same look with one button? 问：有没有一种方法可以通过一个按钮完成相同的外观？

It is possible but I'm not sure if it's any nicer way of doing so. 有可能，但是我不确定这是否是更好的方法。

Tuned CSS: 调整CSS：

.scale{   
    height: 5px;
    position: absolute;
    bottom: 100px;
    width: 100%;
    overflow:hidden;
}

.btn1{
    position: absolute;
    bottom: 50px;
    width: 100%;
}

Tuned JS: 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);    
    });
  }  
});

Working fiddle: https://jsfiddle.net/h145kqrf/23/ 工作提琴： https : //jsfiddle.net/h145kqrf/23/

Side note: 边注：

Your CSS is so heavy, my Chrome struggles to get any FPS at all! 您的CSS很重，我的Chrome很难获得任何FPS！

如何将“ slideup（）”和“ slidedown（）”函数应用于可折叠的Jquery Mobile 1.4.5？杰菲德

问题描述

1 个解决方案

解决方案1
0 2017-09-18 22:01:01

Q: Is there a way to accomplish the same look with one button? 问：有没有一种方法可以通过一个按钮完成相同的外观？

Tuned CSS: 调整CSS：

Tuned JS: JS调优：

Side note: 边注：

如何将“ slideup（）”和“ slidedown（）”函数应用于可折叠的Jquery Mobile 1.4.5？ 杰菲德

问题描述

1 个解决方案

解决方案1 0 2017-09-18 22:01:01

Q: Is there a way to accomplish the same look with one button? 问：有没有一种方法可以通过一个按钮完成相同的外观？

Tuned CSS: 调整CSS：

Tuned JS: JS调优：

Side note: 边注：

如何将“ slideup（）”和“ slidedown（）”函数应用于可折叠的Jquery Mobile 1.4.5？杰菲德

解决方案1
0 2017-09-18 22:01:01