Question

我需要帮助修复按钮。目前它在滑动模式下工作正常。

的jsfiddle

http://jsfiddle.net/aprd3vr4/

问题1：

当您单击按钮后，绿色按钮会下降并返回。如何解决这个问题？

问题2：

当'内容'框（div）幻灯片时我需要一个合适的宽度而不是“85％” 如何解决这个问题？

先谢谢。

HTML

<div class="holdingbox ">   
    <div class="rightbox">          
        <div class=" content">          
            <div class="legendContainer">
                <div class="headerDiv">Status :</div>   
                <div class=" legend innerElement"><span class="Bad"></span> Bad</div>               
                <div class=" legend innerElement"><span class="Good"></span>Good</div>
                <div class="legend innerElement"><span class="Neutral"></span>Neutral</div>             
                <div class="legend innerElement"><span class="No-Status"></span>No status</div>
            </div>
            <div class="legendContainer1">
                <div class="headerDiv">Trends :</div>   
                <div class=" legend innerElement"><span class="downGood-Trend"></span>Up Bad</div>              
                <div class=" legend innerElement"><span class="downBad-Trend"></span>Down Bad</div>
                <div class="legend innerElement"><span class="upGood-Trend"></span>Up Good</div>                
                <div class="legend innerElement"><span class="upBad-Trend"></span>Up Bad</div>
                <div class="legend innerElement"><span class="Side-Trend"></span>Side</div>             
                <div class="legend innerElement"><span class="No-Trend"></span>No Trend</div>
            </div>
        </div>
    </div>  
    <a class="leftbox" href="#">Legends</a>
</div>

CSS

.innerElement{  
display:inline-block;
padding: 2px 5px!important;
margin:0;
}
.legendContainer,.legendContainer1{
width: 95%;
background: #fff;
padding:3px 0px;
}
.legendContainer{
margin: 10px 0px 0px 10px;
border-bottom: 1px solid #ccc;
border-radius: 10px 0px 0px 0px;
}
.legendContainer1{
margin: 0px 0px 10px 10px;
border-radius: 0px 0px 10px 0px;
}
.headerDiv{
color: #141414;
text-align: right;
display: inline-block;
line-height: 32px;
padding: 0px 10px;
width: 10%;
font-weight: 700;
font-size:14px;
}
.holdingbox {
position: absolute;
top: 114px;
right: 0px;
}

.leftbox {
position: relative;
top: 42px;
display: inline-block;
font-size: 15px;
-ms-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-o-transform: rotate(90deg);
left:33px;
padding: 2px 18px 2px 18px;
text-decoration: none;
text-align: center;
float: right;
background: #2EAD13;
color: #FFFFFF;
}

.rightbox {
position: relative;
display: inline-block;
overflow: hidden;
margin: 10px 0px 10px 0px;
background: #3d3f49;
vertical-align: top;
height: 106px;
float: right;
top: -8px;
width:0%;
}
.content{
display: inline-block;
margin: 5px 0px 5px 5px;
position: relative;
width: 700px;
height: 100px;
}

Jquery的

$('.rightbox').width('0%');
 $('.leftbox').click( function() {       
     var toggleWidth1 = $('.holdingbox')[0].style.width == "90%" ? "0%" : "90%";
     var toggleWidth = $('.rightbox')[0].style.width == "85%" ? "0%" : "85%";
     $('.holdingbox').animate({ width: toggleWidth1 });
    $('.rightbox').animate({ width: toggleWidth });

});

Answer 1

我不明白为什么你这么复杂。这是动画的一种简单方法：

＆＃13;

$(function () {
  $(".legends").click(function () {
    $("body").toggleClass("legendOpen");
    return false;
  });
});

＆＃13;

* {padding: 0; margin: 0;}
body {overflow: hidden;}
.legends {position: absolute; -ms-transform: rotate(90deg); -moz-transform: rotate(90deg); -webkit-transform: rotate(90deg); -o-transform: rotate(90deg); right: -1.5em; top: 20%; background: #2EAD13; color: #fff; text-decoration: none; padding: 3px 7px; z-index: 9; -webkit-transition: all 1s; -o-transition: all 1s; transition: all 1s;}
.legendContainer {position: absolute; top: 20%; right: -215px; -webkit-transition: all 1s; -o-transition: all 1s; transition: all 1s;}
.legendContainer .legendBox {border: 1px solid #2EAD13; padding: 50px; margin-top: -49px;}

.legendOpen .legends {right: 191px;}
.legendOpen .legendContainer {right: 0;}

＆＃13;

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<a href="#" class="legends">Legends</a>
<div class="legendContainer">
  <div class="legendBox">Legend Content</div>
</div>

＆＃13;

Answer 2

Jquery中的更改，修复了我的滑块

$('.leftbox').click( function() {       
     $('.rightbox').animate({width: 'toggle'}); 
});

JS FIDDLE 的 http://jsfiddle.net/aprd3vr4/5/

修复Jquery和CSS中的滑块问题

2 个答案: