0

私はこのJavaScriptコードを書いており、情報パネルをクリックすると...addressアドレスを使用してdivを中央に移動する必要がありますmoved。

問題

トリガー ボタンをクリックする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>
4

1 に答える 1

0

これはあなたが望むものですか？デモ

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：このメソッドは、一致した要素を表示または非表示にします。

于 2013-07-06T19:08:29.520 に答える