javascript - Jquery 滑动开关 : Slide Button with Panel

Question

我正在处理 jquery slide tab，它在单击按钮时工作正常。但我想要带面板的纽扣缝线，也应该带面板滑动。目前按钮已修复，面板按预期工作。

这是 FIDDLE

HTML

    <button id="showmenu" type="button" class="feed_btn">Feed Back</button>         
<div class="sidebarmenu">
                  <div class="slide-out-div" style="z-index: 999;">
                      <form  class="generalForm bookingForm" action="#" method="post">
                    <div class="row">
                        <div class="col-sm-12">
                            <label>Name<span>*</span></label>
                            <input type="text" name="Name" class="required" />
                        </div>
                        <div class="col-sm-12 mar_top">
                            <label>Email <span>*</span></label>
                            <input type="text" name="Email" class="required" />

                        </div>
                        <div class="col-sm-12 mar_top">
                            <label>Contact No <span>*</span></label>
                            <input type="text" name="contact_no" class="required" />
                        </div>
                        <div class="col-sm-12 mar_top">
                            <label>Say Few Words<span>*</span></label>
                            <input type="text" name="feedback" class="required" />

                        </div>
                        <div class="col-sm-12">
                            <input type="submit" name="submit" value="Submit" style="background-image:none; padding-left:20px;" />
                        </div>
                    </div>
                </form>
                 </div>


            </div>
            </div>

CSS

    .sidebarmenu{
        position:absolute;
        right:-250px;
        z-index:999999;
    }

JS

    $('#showmenu').click(function() {
        var hidden = $('.sidebarmenu').data('hidden');

        if(hidden){
            $('.sidebarmenu').animate({
                right: '-250px'
            },500)

        } else {
            $('.sidebarmenu').animate({
                right: '0px'
            },500)
        }
        $('.sidebarmenu,.image').data("hidden", !hidden);

        });

Answer 1

如果要将按钮与表单一起移动，那么您需要添加一个父项并仅移动它而不是表单 see demo

HTML

<div class="panel">
    <button id="showmenu" type="button" class="feed_btn">Feed Back</button>
    <div class="sidebarmenu"> -- your code --</div>
</div>

JS

$('#showmenu').click(function () {
    var hidden = $('.sidebarmenu').data('hidden');

    if (hidden) {
        $('.panel').animate({
            marginRight: '-250px'
        }, 500)

    } else {
        $('.panel').animate({
            marginRight: '0px'
        }, 500)
    }
    $('.sidebarmenu,.image').data("hidden", !hidden);

});