Question

我有以下代码，我希望有一个＆＃34;促销＆＃34;左边的div，当你点击它时，它会向右滑动，显示促销列表。但是，当您单击promotion_button div时，promotion_button div会快速移动到右侧，然后promotion_list div向右滑动并与promotion_button div相遇。我需要做什么才能使用promotion_list div滑动promotion_button div？

<script>
    jQuery(document).ready(function(){
        jQuery( ".promotion_button" ).click (function() {

            jQuery('.promotion_list').toggle('slide', {direction: 'right'}, 300);
        });
    });
</script>

<div class="promotion_wrapper" style="position:fixed;top:35%;left:0px;z-index:100;">
    <div class="promotion_list component-teaser-standard shadow" style="width: 253px; min-height:    260px; float: left; display: none;">
        Insert promo here.
    </div>
    <div class="promotion_button" style="background-image: url('/images/promotions_button.png');width:50px;height:174px;float:left;"></div>
</div>

Answer 1

以下是您正在寻找的确切代码

<div class="promotion_wrapper" style="position:fixed;top:35%;left:0px;z-index:100;">
    <div class="promotion_list component-teaser-standard shadow" style="position:absolute;width: 253px; min-height: 260px; float: left; display: block;border:1px solid #000;">
        Insert promo here.
    </div>
    <div class="promotion_button" style="position:absolute;width:50px;height:174px;float:left;border:1px solid #dfdfdf;">button</div>
</div>

JS代码： -

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
    $(document).ready(function(){
        var width=$('.promotion_list').width();
        $('.promotion_list').css('left',-width);
        var rig=$('.promotion_list').position().left;
            $(".promotion_button").click(function() {
                var rig=$('.promotion_list').position().left;
                if(rig == 0 )
                {
                    $('.promotion_list').animate({left:-width}, 300);
                    $(".promotion_button").animate({left:'0px'}, 300);  
                }
                else
                {
                    $('.promotion_list').animate({left:'0px'}, 300);
                    $(".promotion_button").animate({left:width}, 300);
                }
            });
    });
</script>

检查小提琴： - Demo

Answer 2

将promotion_list移至左侧，使其在加载时不可见。改为将按钮添加到促销div，并且只在屏幕上显示div的那一部分而不显示click事件。当用户单击该按钮时，将div从左侧移动，使用与最初用于阴影的相同边距来隐藏它。它会是这样的：

<div class="promotion_wrapper" style="position:fixed;top:35%;left:0px;z-index:100;">
    <div class="promotion_list component-teaser-standard shadow" style="width: 253px; min-height:    260px; float: left; margin-left:-200px;">
        Insert promo here.
       <div class="promotion_button" style="background-image: url('/images/promotions_button.png');width:50px;height:174px;float:left;"></div>

    </div>
</div>

<script>
    jQuery(document).ready(function(){
        jQuery( ".promotion_button" ).click (function() {

            jQuery('.promotion_list').toggle('slide', {direction: 'right'}, 200);
        });
    });
</script>

Answer 3

选中此JSFiddle希望它适用于您

<div id="cat_icon">Menu</div>
<div id="categories">
  <div CLASS="panel_title">Categories</div>
  <div CLASS="panel_item">E1</div>
  <div CLASS="panel_item">E 2</div>
  <div CLASS="panel_item">E 3</div>
  <div CLASS="panel_item">E 4</div>
</div>

JS来自Above Link

jQuery从左切换滑出

3 个答案: