Question

我已经编写了这个javascript代码，当你点击信息面板时...它应该使用addressmoved将address div浮动到中心。

问题

当我点击触发按钮，而不是address div浮动到中心时，它会转到下一个内容的按钮，这不应该发生。此外，当您单击触发按钮以关闭信息面板时，地址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方法：此方法显示或隐藏匹配的元素。

jQuery onclick向左浮动并返回

1 个答案: