Question

我正在尝试像这样制作一个Toggle函数：

http://gyazo.com/26fc509c540e5175c07593b57caef386

但我也有一些麻烦让它反转，所以联系方式框必须向下显示，就像gif文件一样

这就是我现在所拥有的：

http://codepen.io/anon/pen/gpRVEa

有人可以帮帮我吗？三江源

这是HTML：

<div class="widget-style" id="widget"><a id="widget" hef="#"> Click here for more info</a></div>

<div class="contact-style" id ="contact" > Contact <hr>
  <p>More information in here</p>
<p>And More information in here</p>
<p>More information in here</p>
<p>And More information in here</p>
</div>

这是CSS：

.widget-style {

  width: 300px;
  height: 20px;
  background-color:black;
  color:white;
  font-size:18px;
  text-align: center;
  vertical-align:bottom;
  padding:14px;
  margin-left:40%;
  position:fixed;
  bottom:0;
  cursor:pointer;
}

.contact-style {

  width: 400px;
  height: 230px;
  background-color:white;
  border:1px solid #000;
  color:black;
  font-size:18px;
  text-align: left;
  vertical-align:bottom;
  padding:14px;
  margin-left:37%;
  position:fixed;
  bottom:48px;
  cursor:pointer;
}

p {
  font-size:14px;
}

这是JS：

$(document).ready(function(){


$("#contact").hide();  

$( "#widget" ).click(function() {
  $( "#contact" ).slideToggle( "slow" );
});

});

Answer 1

这样做：https://jsfiddle.net/qkk6a4tf/1/

<强> HTML

<div id="fullwidget">
    <div class="widget-style" id="widget"><a id="widget" hef="#"> Click here for more info</a>
    <span class="arrowup">&#8593;</span>
    <span class="arrowdown">&#8595;</span>

    </div>
    <div class="contact-style" id="contact">Contact
        <hr>
        <p>More information in here</p>
        <p>And More information in here</p>
        <p>More information in here</p>
        <p>And More information in here</p>
    </div>
</div>

<强> CSS

.widget-style {
    width: 300px;
    height: 20px;
    background-color: black;
    color: white;
    font-size: 18px;
    text-align: center;
    vertical-align: bottom;
    padding: 14px;
    cursor: pointer;
    border-radius: 0px;
    z-index: 9;
}
.contact-style {
    width: 298px;
    height: 230px;
    background-color: white;
    border: 1px solid #000;
    color: black;
    font-size: 18px;
    text-align: left;
    padding: 14px;
    cursor: pointer;
}
p {
    font-size: 14px;
}
#fullwidget {
    width: 300px;
    height: 250px;
    position: fixed;
    left: 0px;
    right: 0px;
    bottom: -201px;
    margin-left: auto;
    margin-right: auto;
    transition: 0.6s;
}
.widgetActive {
    margin-bottom: 250px;
}

<强> JS

//&#8593; Up arrow
//&#8595; Down arrow
$(".arrowdown").hide();
$(".arrowup").show();
$("#widget").click(function () {
    $(".arrowup").toggle();
    $(".arrowdown").toggle();
    $("#fullwidget").toggleClass("widgetActive");
});

Answer 2

这会有用吗？我决定使用动画和点击功能;

因为我在你的例子中找不到任何错误。

$(document).ready(function() {
  var $d = $('.container');
  $('.button').click(function() {

    dont();

  });

  $('.container').mouseleave(function() {
    doo();
  });

  function doo() {
    $d.animate({
      bottom: '-75px'
    });
  }

  function dont() {
    $d.animate({
      bottom: '000'
    });
  }
});

.button {
  background: black;
  height: 30px;
  width: 100%;
  color: white;
}
.container {
  position: fixed;
  height: 100px;
  width: 100%;
  border: 1px solid black;
  bottom: -75px;
}
.a {
  position: absolute;
  height: 30px;
  width: 100%;
  bottom: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<div class="container">

  <div class="button">click</div>
  <div class="a">asdasd</div>
</div>

jQuery Toggle - Sticky on Bottom - Reverse

2 个答案: