1

動的に生成された div をボタンの真上 (Z インデックスではなく、ページの上部) に配置したいと考えています。ボタンをクリックすると、逆の jQuery で div を表示したいと思いますslideToggle()。

フィドルで例を設定しました：http://jsfiddle.net/sablefoste/YWnJE/30/

私は近くにいますが、リビールをボタンの真上に表示するように配置できないようです。http://www.learningjquery.com/2009/02/slide-elements-in-different-directions/position:absolute; left:0;bottom:0; の最初の例に従ってCSSを使用することで、上にスライドさせることができます。

を別のものに変更するleft:0; bottom:0;と、ブラウザ ウィンドウのサイズが変更されるまで正しく配置できます。

ブルート フォースなしでこれを行う方法はありますか (具体的には、 の上部を特定し、#storiesbuttonjQuery を使用して の下部を再配置し#storylistます)。

どんなアイデアでも大歓迎です！ありがとうございました！

4

4 に答える 4

1

ここでは完全に当​​て推量にすぎませんが、ボタンの上にメニューを表示する必要があるということです。使ってみました

var list = $('#storylist'),
    button = $('#storiesbutton'),
    speed = 500;

list.hide().css('bottom', button.css('top'))
    .css('margin-top', list.outerHeight() * -1);

したがって、ストーリーの位置は、ボタンの位置とリストの高さに基づいてロード時に設定されます。

フィドル: http://jsfiddle.net/qt3LE/

私が言ったように、私はあなたが求めているものに100％ではありません. これはポジショニングに役立つ場合があります。

また$.toggle(function(){}, function(){})、個々のトグルをより細かく制御できるため、toggleSlide を使用しました。

于 2012-12-15T03:40:50.403 に答える
1

したがって、position: absoluteその要素を配置すると、最初の非静的祖先に従って、固定されたピクセルのセットとして配置されます。ほとんどの場合、そして今回のケースでは、それは本体自体であり、それが底で動かなくなった理由です。やりたいことは、別の div 内に絶対配置された要素を制約して、ページの下部ではなく、必要な場所に配置されるようにすることです。したがって、その要素をラップするだけです。

<div id="wrapper">
    <div id="storylist" style="display:none;">
      <ul>
           <li>
             Title 1 goes here.
           </li>
           <li>
             Title 2 goes here.
           </li>
           <li>
             Maybe a Title 3 goes here, but it is dynamically generated.
           </li>
      </ul>
    </div>
</div>

別のdiv内で、その新しいdivを指定します

#wrapper{
   position: relative;   
}

フィドルの例を次に示します。

于 2012-12-15T03:34:58.167 に答える
0

次のように、ボタンバーとストーリーラインをコンテナーに入れます。

<div id="container">
<div id="storylist">
  <ul>
       <li>
         Title 1 goes here.
       </li>
       <li>
         Title 2 goes here.
       </li>
       <li>
         Maybe a Title 3 goes here, but it is dynamically generated.
       </li>
  </ul>
</div>

<div class= "buttonbar">
  <div>
    <span class="navbutton" id="librarybutton" >
        <a href ="#" title="Information">
            Information
        </a>
    </span>
    <span class="navbutton" id="storiesbutton" >
        <a href ="#">
            Stories
        </a>
    </span>
  </div>
</div>

</p>

そして、ここにそれらのcssがあります：

#container {
position:relative;
background:#efefef;
}
#storylist{
height:60px;
position:absolute;
left:0;
bottom:0;
}
.buttonbar{
margin:20px 50px 20px 0;    
text-align:center;
width:100%;
position:absolute;
bottom:-60px;
}

ボタンバーとストーリーラインを絶対的に配置して、目的の「上向きのスライド」アクションを取得できるようにしました。これがあなたが望むものであることを願っています。これが私がやったことのフィドルです。http://jsfiddle.net/YWnJE/41/

于 2012-12-15T03:41:18.023 に答える
0

よくわかりませんが、ボタンの上にある情報を探している場合は、削除してみてくださいposition:absolute

このように http://jsfiddle.net/cjds/AnpzK/

于 2012-12-15T03:14:12.110 に答える