jQuery onclick 向左浮动并返回

Question

我编写了这段 javascript 代码，当您单击信息面板时...它应该使用 addressmoved 将 address div float 到中心。

问题

当我点击触发按钮时，address div 不是 float 到中心，而是转到下一个内容的按钮，这是不应该发生的。此外，当您单击触发按钮关闭信息面板时，地址 div 应该恢复正常。

问题

当你点击触发按钮时，我怎样才能让地址转到中心，当你点击触发按钮时，我怎样才能让它回到正确的位置。 jquery

<script type="text/javascript">
$(document).ready(function(){
    $(".trigger").click(function(){
        $('.address').removeClass('address').addClass('addressmoved');
        $(".panel").toggle("fast");
        $(this).toggleClass("active");
        return false;
    });
});
</script>

CSS

.addressmoved{
float:left;
right:0;
}

.address{
font-size: 18px;
height: 120px;
position: absolute;
right: 100px;
top: 50px;
width: 200px;
}

HTML

<div class="address">
  <img src="image.png" alt="mainicon" />
  <span>hellow</br>
    <em>world</em> 
  </span>
  <ul>
    <li class="icon"> 
      <img class="social" src="icon1.png " alt="icon1"/>    
      </a>      
    </li> 
  </ul>
</div>

Answer 1

这就是你想要的？ DEMO

这是HTML代码:

<div class="container">
    <button id="trigger" class="button">Info panel</button>
    <div id="info-panel"></div>
</div>

CSS

body, div, button {
    margin: 0;
    padding: 0;
}
button:focus {
    none;
}
body {
    background: #333;
    font: 1.2em Arial, sans-serif;
}
.container {
}
.button {
    color: white;
    font: inherit;
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
    border: 1px solid gray;
    background: #555;
    margin: 2em 0;
    padding: 1em;
    position: fixed;
    right: 0;
    cursor: pointer;
}
.button:hover {
    padding-right: 1.5em;
}
#info-panel {
    float: right;
    width: 300px;
    height: 400px;
    background: rgba(0, 0, 0, .5);
    margin: .75em 0;
}

JavaScript 代码:

$("#trigger").click(function () {
    $("#info-panel").toggle("slow");
});

我使用了 toggle 方法:此方法显示或隐藏匹配的元素。