1

それは私のコードペンです: http://codepen.io/helloworld/pen/pvPzLa

左/右のシェブロン ボタンを押してスライドすると、div は右にスライドしませんが、最初は右から左にスライドします。

原因は、最初に可視性プロパティを非表示/折りたたみに設定したことです。

ユーザーがスライド ボタンをクリックすると、スライドする div から可視性属性が削除されます。

間違った動作を修正するにはどうすればよいですか?

HTML

  <div id="availableOptionsSidebar" style="background-color:pink;" class="col-lg-1">
        <div id="availableOptionSidebarContainer" style="text-align:center;display: table;z-index:100000;background-color:orange;">
            <span id="availableOptionSidebarContainerOpener" style="cursor:pointer;font-size:2em;display:table-cell;vertical-align:middle;" class="glyphicon glyphicon-chevron-left"></span>
            <div style="position:relative;height:100%;">
                <div id="availableOptionsContainer" style="position:absolute;height:100%;width:180px;border:black solid 1px;background-color:red;">
                    <div>
                        <span style="cursor:pointer;font-size:2em;display:table-cell;vertical-align:middle;" class="glyphicon glyphicon-chevron-left"></span>
                        <span style="cursor:pointer;font-size:2em;display:table-cell;vertical-align:middle;" class="glyphicon glyphicon-chevron-right"></span>
                    </div>
                    <div>
                        <div class="row">
                            <div>1</div>
                            <div>2</div>
                            <div>3</div>
                        </div>
                        <div class="row">
                            <div>1</div>
                            <div>2</div>
                            <div>3</div>
                        </div>
                        <div class="row">
                            <div>1</div>
                            <div>2</div>
                            <div>3</div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
</div>

ジャバスクリプト

   $(function () {

        $('#parameterContainer').height(400);
        $('#availableOptionSidebarContainer').height(400);
        $('#availableOptionsContainer').css('visibility', 'hidden');

        $('#availableOptionSidebarContainer').click(function () {

        $('#availableOptionsContainer').css('visibility', "");


            if ($("#availableOptionSidebarContainerOpener").is(".glyphicon-chevron-left")) { // sidebar is closed
                $("#availableOptionSidebarContainerOpener").removeClass("glyphicon-chevron-left");
                $("#availableOptionSidebarContainerOpener").addClass("glyphicon-chevron-right");

            }
            else { // sidebar is openend
                $("#availableOptionSidebarContainerOpener").removeClass("glyphicon-chevron-right");
                $("#availableOptionSidebarContainerOpener").addClass("glyphicon-chevron-left");

            }


            // Set the effect type
            var effect = 'slide';

            // Set the options for the effect type chosen
            var options = { direction: 'left' };

            // Set the duration (default: 400 milliseconds)
            var duration = 500;

            $('#availableOptionsContainer').toggle(effect, options, duration);

         });
   });
4

1 に答える 1

0

おそらく、プロパティ display: noneの代わりにを設定したいでしょう。visibility#availableOptionsContainer

参考までに: jQuery を使用すると、複数のクラスを切り替えることができます。あなたのデモからのこの混乱の代わりに

if ($("#availableOptionSidebarContainerOpener").is(".glyphicon-chevron-left")) {
    // sidebar is closed
    $("#availableOptionSidebarContainerOpener").removeClass("glyphicon-chevron-left");
    $("#availableOptionSidebarContainerOpener").addClass("glyphicon-chevron-right");
    $("#availableOptionSidebarContainerOpener").removeClass("rotateIn");
    $("#availableOptionSidebarContainerOpener").addClass("rotateOut"); 
}
else {
    // sidebar is openend
    $("#availableOptionSidebarContainerOpener").removeClass("glyphicon-chevron-right");
    $("#availableOptionSidebarContainerOpener").addClass("glyphicon-chevron-left");
    $("#availableOptionSidebarContainerOpener").addClass("rotateIn");
    $("#availableOptionSidebarContainerOpener").removeClass("rotateOut"); 
}

あなたはただすることができます

$("#availableOptionSidebarContainerOpener").toggleClass("glyphicon-chevron-right glyphicon-chevron-left rotateIn rotateOut");

rotateInHTMLで初期クラスを設定することを忘れないでください。

于 2015-01-18T12:43:03.480 に答える