如何增加滑出的宽度

Question

为此，我想更改此滑出式面板在 jsfiddle. I used the code from this jsfiddle 中的长度。在那一个中，如果我将 slideit 的宽度和左关闭设置更改为 200 而不是 100，则宽度会增加并且工作正常。但是，如果我在我的面板上做同样的事情，面板就会消失。我猜我在将它转换到左侧时没有正确更改某些内容。谁能解释一下如何增加宽度以使面板滑出更远？

    <style>
    div#slideit {position: fixed; top: 100px; left:0px; margin: 0px; padding: 20px 0px 0px; color:#fff; background:#5681b4; list-style: none; z-index:9999; width: 100px; border-radius:0px 30px 30px 5px}
    div#slideit .slideit-btn {background:#5681b4; border-radius:0px 10px 10px 0px; position:absolute; top:10px; left:90px; width:40px; height:70px; display:block; cursor:pointer;}
    div#slideit .slideitspan {width:100px; margin:4px 2px; text-align:center; text-decoration:none; color:#FFF;}
    .vertical-text {
     font-size:18px; 
     transform: rotate(90deg);
     transform-origin: left top 0;
     position:absolute; top: 10px; left:34px;
    }
    </style>

    <div id="slideit">
     <div class="slideit-btn"> <span class="vertical-text"></span></div>
     <div class="slideitspan">You can now easily create banners, configure them as you like, link them to anywhere you want, like to products, categories, any page of your store or any other website and display them on various areas of your store, for example the front page. Learn more on the mini template system usage page </div>
    </div>   

    <script>
    $(function() {
     $.fn.ToggleSlide = function() {
         return this.each(function() {
             //$(this).css('position', 'absolute');

             if(parseInt($(this).css('left')) < 0) {
                 $(this).animate({ 'left' : '0px' }, 120, function() {
                 $(".vertical-text").text("Close");
                     //$(this).css('position', 'relative');
                 });
             }
             else {
                 $(this).animate({ 'left' : '-100px' }, 120, function() {
                 $(".vertical-text").text("Open");
                     //$(this).css('position', 'relative');
                 });
             }
         });
     };

    $('#slideit').ToggleSlide();

     $(".slideit-btn").bind("click", function() {
         $('#slideit').ToggleSlide();
     });
    });
    </script>

Answer 1

非常straight-forward。增加 html 个元素的宽度

*{box-sizing: border-box;}
#slideit, #slideit .slideitspan{width:300px;}
#slideit .slideitspan{padding: 30px;}
#slideit .slideit-btn{left: initial; right: -32px;}

然后将js应用的offset调整为相同的量：

$(this).animate({ 'left' : '-300px' }, 120, function() {...

https://jsfiddle.net/2c7rzm3q/

如何增加滑出的宽度

How to increase width of slide out

css

jquery

slidetoggle