Jquery打开close div丢失的东西

时间：2015-05-20 10:13:30

标签： javascript jquery css css3

我想点击一下从左到右显示div。我已经从jsfiddle.net

创建了这个 DEMO

在此演示中，您可以看到有一个绿色div。当您单击此div时，左侧div从左向右打开。

但与此同时，当您单击绿色按钮时，绿色按钮类会自动更改，并且html文本也会发生变化。 （点击显示向左滑动以关闭）

所以当我点击绿色div时我想要它，然后左侧div将打开，第二次点击绿色div然后左侧div将关闭动画。

我该怎么办？我的DEMO中缺少的是什么。

这是一段代码：

JS 

$(".click_open_close").click(function(){
   var id = $(this).data("id");
    $(".left_in").animate({width:"100%"}, 200).find(".aa").animate({width:"100%"}, 200);
    $(".click_open_close").html("Close");
    $(".r").removeClass("click_open_close");
    $(".r").addClass("pp");
});
$(".pp").click(function(){
   $(".left").animate({width:"0%"},200);
   $(".left_in").animate({width:"0%"},200);      
});

HTML 

<div class="test_container">
  <div class="left">
      <div class="left_in"><div class="aa">ss</div></div>
  </div>
  <div class="r click_open_close" data-id="100">Click To Show Slide Left In</div>
</div>

CSS 

.test_container{
  display: block;
  position: absolute;
  height: auto;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  max-width: 980px;
  min-width: 300px;
  margin-top: 20px;
  margin-bottom: 20px;
  margin-right: auto;
  margin-left: auto;
  background-color: #000;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .06), 0 2px 5px 0 rgba(0, 0, 0, .2);
  -webkit-box-shadow: rgba(0, 0, 0, 0.0588235) 0px 1px 1px 0px, rgba(0, 0, 0, 0.2) 0px 2px 5px 0px;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -o-border-radius: 3px;
  -moz-border-radius: 3px;
  min-height: 140px;
}
.left{
  display: block;
  position: absolute;
  float: left;
  width: 30%;
  overflow: hidden;
  padding: 0px;
  bottom: 0;
  top: 0;
  left: 0;
  background-color: red;
  border-right: 1px solid #d8dbdf;
  -webkit-border-top-left-radius: 3px;
  -webkit-border-bottom-left-radius: 3px;
  -moz-border-radius-topleft: 3px;
  -moz-border-radius-bottomleft: 3px;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  transition: opacity 2s, width 2s, left 2s, font-size 2s, color 2s;
}
.left_in{
  z-index: 999 !important;
  position: absolute;
  float: left;
  width: 0%;
  height: 100%;
  background-color: #f7f7f7;
  opacity: 0;
  -webkit-animation-duration: 0.9s;
  animation-duration: 0.9s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: slideLeft;
  animation-name: slideLeft;
  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
@-webkit-keyframes slideLeft {
  0% {
    -webkit-transform: translateX(25rem);
    transform: translateX(25rem);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideLeft {
  0% {
    -webkit-transform: translateX(15rem);
    transform: translateX(15rem);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}
.aa{
        background-color: #f7f7f7;
  /*background-color: #dfdfdf;
  background-image: -webkit-linear-gradient(top,#dddbd1,#d2dbdc);
  background-image: linear-gradient(top,#dddbd1,#d2dbdc);*/
  width: 0;
  top: 0;
   border-radius:0%;
  z-index: 1000;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  position: absolute;
  right:0;
}
.click_open_close{
  right:0px;
  padding:10px;
  color:#fff;
  position:absolute;
  background-color:green;
  cursor:pointer;
}
.pp{
  right:0px;
  padding:10px;
  color:#fff;
  position:absolute;
  background-color:green;
  cursor:pointer;
}

4 个答案:

答案 0 :(得分：2)

当您第一次添加点击时，您的pp类不在dom中，因此您需要使用.on：

$(".test_container").on("click", ".click_open_close", function(){
   var id = $(this).data("id");
    $(".left_in").animate({width:"100%"}, 200).find(".aa").animate({width:"100%"}, 200);
    $(".click_open_close").html("Close");
    $(".r").removeClass("click_open_close");
    $(".r").addClass("pp");
});
$(".test_container").on("click", ".pp", function(){
   $(".left").animate({width:"0%"},200);
   $(".left_in").animate({width:"0%"},200);      
});

Updated fiddle

答案 1 :(得分：2)

您只是在不必要地更改了点击的等级。请查看 DEMO 及以下代码。

只需将HTML data-*属性添加到按钮即可确定状态，如下所示：

<div class="r click_open_close" data-state="close" data-id="100">Click To Show Slide Left In</div>

<强> JS 

$(".click_open_close").on('click',function(){
       var id = $(this).data("id");
       var state=$(this).data("state");
       if(state==="close")
       {
           $(this).data("state",'open');
           $(".left_in").animate({width:"100%"}, 200).find(".aa").animate({width:"100%"}, 200);
           $(this).text('Close');
       }
       else
       {
           $(this).data("state",'close');
           $(".left_in").animate({width:"0%"}, 200).find(".aa").animate({width:"0%"}, 200);
           $(this).text('Click To Show Slide Left In');
       }
});

答案 2 :(得分：1)

嗯，为了多样性......我简化了很多，尽管有更好的方法来做到这一点。

但试试这个：

＆＃13;
＆＃13; 
var isOpened = false,
    button = $('.r'),
    leftDiv = $('.left_in');
button.click(function () {
    if (isOpened) {
        close();
    } else {
        open();
    }
});


function open() {
    leftDiv.animate({
        width: "100%"
    }, 200).find(".aa").animate({
        width: "100%"
    }, 200);
    button.text("Close");
    isOpened = true;
}

function close() {
    leftDiv.animate({
        width: "0%"
    }, 200);
    button.text("Click To Show Slide Left In");
    isOpened = false;
}
＆＃13; 
.test_container {
    display: block;
    position: absolute;
    height: auto;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
    max-width: 980px;
    min-width: 300px;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-right: auto;
    margin-left: auto;
    background-color: #000;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .06), 0 2px 5px 0 rgba(0, 0, 0, .2);
    -webkit-box-shadow: rgba(0, 0, 0, 0.0588235) 0px 1px 1px 0px, rgba(0, 0, 0, 0.2) 0px 2px 5px 0px;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -o-border-radius: 3px;
    -moz-border-radius: 3px;
    min-height: 140px;
}
.left {
    display: block;
    position: absolute;
    float: left;
    width: 30%;
    overflow: hidden;
    padding: 0px;
    bottom: 0;
    top: 0;
    left: 0;
    background-color: red;
    border-right: 1px solid #d8dbdf;
    -webkit-border-top-left-radius: 3px;
    -webkit-border-bottom-left-radius: 3px;
    -moz-border-radius-topleft: 3px;
    -moz-border-radius-bottomleft: 3px;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    transition: opacity 2s, width 2s, left 2s, font-size 2s, color 2s;
}
.left_in {
    z-index: 999 !important;
    position: absolute;
    float: left;
    width: 0%;
    height: 100%;
    background-color: #f7f7f7;
    opacity: 0;
    -webkit-animation-duration: 0.9s;
    animation-duration: 0.9s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: slideLeft;
    animation-name: slideLeft;
    -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
@-webkit-keyframes slideLeft {
    0% {
        -webkit-transform: translateX(25rem);
        transform: translateX(25rem);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}
@keyframes slideLeft {
    0% {
        -webkit-transform: translateX(15rem);
        transform: translateX(15rem);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}
.aa {
    background-color: #f7f7f7;
    /*background-color: #dfdfdf;
  background-image: -webkit-linear-gradient(top,#dddbd1,#d2dbdc);
  background-image: linear-gradient(top,#dddbd1,#d2dbdc);*/
    width: 0;
    top: 0;
    border-radius:0%;
    z-index: 1000;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    position: absolute;
    right:0;
}
.click_open_close {
    right:0px;
    padding:10px;
    color:#fff;
    position:absolute;
    background-color:green;
    cursor:pointer;
}
.pp {
    right:0px;
    padding:10px;
    color:#fff;
    position:absolute;
    background-color:green;
    cursor:pointer;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test_container">
    <div class="left">
        <div class="left_in">
            <div class="aa">ss</div>
        </div>
    </div>
    <div class="r click_open_close" data-id="100">Click To Show Slide Left In</div>
</div>
＆＃13;
＆＃13;
＆＃13;

您还可以切换类并使用CSS过渡和更多选项。但对你来说，关于你的代码我试图简化它。

答案 3 :(得分：0)

我不会纠正你的小提琴，因为jcubic做了它但是为了你的信息，有一种更简单，更清晰的方法来通过使用toggleClass（）和CSS转换来实现你所需要的。这是一个例子：

＆＃13;
＆＃13; 
$('#button').on('click', function() {
  $('#banner').toggleClass('unfolded');
});
＆＃13; 
html,
body {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.wrapper {
  position: relative;
  height: 100%;
}
.banner {
  position: absolute;
  top: 0;
  right: -140px;
  transition: right 0.5s;
  width: 150px;
  padding: 12px;
  background-color: #000;
  color: #fff;
}
.button {
  cursor: pointer;
  font-weight: bold;
}
.banner.unfolded {
  right: 0;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="content">
    <h1>Some content</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius iusto, et modi nulla officiis repellat necessitatibus laborum, enim consectetur sunt doloribus tempora esse illum eum incidunt veritatis, quaerat, nostrum eos?</p>
  </div>

  <div class="banner" id="banner">
    <div class="button" id="button">>></div>
    <ul>
      <li>Link</li>
      <li>Link</li>
      <li>Link</li>
      <li>Link</li>
      <li>Link</li>
    </ul>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题