Question

嗨我有2个div，一个名为basic，另一个名为advanced。然后我有按钮显示高级。当我点击显示高级按钮时，它会向下切换。但我希望它从右向左滑动。

这里是html

<div class="container" id="divBasic">Basic data</div>

<div class="container top_offset" id="divAdvanced" style=""> Advanced data</div>

    <a style="float:right; margin-right: 10px; padding-right: 10px" href="javascript:void(0);" onclick="toggle_advanced(this);" id="hpAdvanced_top">Show Advanced ></a>

这里是js

                                            function toggle_basic(source) {

                                                var div = $("#divBasic");
                                                var top_btn = $("#divButtons");

                                                div.toggle();
                                                top_btn.toggle();
                                                $("#divShapes").toggle();

                                                if (source == "shapes") {
                                                    storeValue("Basic", "none");
                                                } else {
                                                    storeValue("Basic", "block");
                                                }

                                            }



                                            function toggle_advanced(hp) {

                                                var divAdvanced = $("#divAdvanced");

                                                divAdvanced.toggle();


                                                if (hp.outerText != "Show Advanced") {
                                                    storeValue("Advanced", "none");
                                                    //top_btn.css("height", "30px");
                                                    hp.innerText = "Show Advanced";
                                                } else {
                                                    storeValue("Advanced", "block");
                                                    //top_btn.css("height", "0px");
                                                    hp.innerText = "Hide Advanced";
                                                }
                                            }

请帮助我从左到右滑动高级div

谢谢

Answer 1

＆＃13;

function toggle_basic(source) {

    var div = $("#divBasic");
    var top_btn = $("#divButtons");

    div.toggle();
    top_btn.toggle();
    $("#divShapes").toggle();

    if (source == "shapes") {
        storeValue("Basic", "none");
    } else {
        storeValue("Basic", "block");
    }

}



function toggle_advanced(hp) {

    var divAdvanced = $("#divAdvanced");

    divAdvanced.toggle("slide");


    if (hp.outerText != "Show Advanced") {
        //storeValue("Advanced", "none");
        //top_btn.css("height", "30px");
        hp.innerText = "Show Advanced";
    } else {
        //storeValue("Advanced", "block");
        //top_btn.css("height", "0px");
        hp.innerText = "Hide Advanced";
    }
                                            }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="container" id="divBasic">Basic data</div>

<div class="container top_offset" id="divAdvanced" style=""> Advanced data</div>

    <a style="float:right; margin-right: 10px; padding-right: 10px" href="javascript:void(0);" onclick="toggle_advanced(this);" id="hpAdvanced_top">Hide Advanced ></a>

＆＃13;

使用ele.toggle("slide");从左向右滑动，并使用jquery-ui获得效果

Answer 2

使用此

 $('#divAdvanced').toggle('slide', {
        direction: 'left'
    }, 1000);

您可以根据需要将left更改为right

如何更改使用javascript将div切换到左右幻灯片

2 个答案: