0

Twitter フィードを持つ UI に取り組んでいます。下のツイートを下に押して、2 つのツイートの途中でパネルを開くことができるようにしたいと考えています。この機能は、TweetBot などのツイート クライアントで見ることができます。ストリーム内の各新しいツイートがポップアップするたびに、その下の各ツイートも押し下げられます. ツールバーはすべてのツイートで同じです。

これが私がJSのために持っているものです：

$(document).ready(function() {
    hidden = true;
    $("div#tweetcontainer").click(function() {
        if (hidden == false) {
            $("div#toolbar").slideUp('fast');
            hidden = true;
        } else {
            $("div#toolbar").slideDown('fast');
            hidden = false;
        }
    });
});​

HTML のマークアップは次のとおりです。

          <div id="wrapper">
    <!------------- Indivdual Tweet -------------------------->
<div id="tweetcontainer">
<div id="avatarcontainer">
  <div id="avatar"></div>
</div>
<div id="content">
  <div id="tweetheader">
    <div id="name">
      <h1>John Drake</h1>
    </div>
    <div id="tweethandle">
      <h2>@Drakejon</h2>
    </div>
    <div id="tweettime">10m</div>
  </div>
  <div>
    <p>Exceptional Buys Ranger To Give Monitoring Shot In The Arm To Its 'DevOps' Platform <a href="http://tcrn.ch/11m3BrO">http://tcrn.ch/11m3BrO</a> by <a href="#">@sohear</a> </p>
  </div>
</div>
</div>
<!------------- Indivdual Tweet 2 -------------------------->
<div id="tweetcontainer">
<div id="avatarcontainer">
  <div id="avatar"></div>
</div>
<div id="content">
  <div id="tweetheader">
    <div id="name">
      <h1>John Drake</h1>
    </div>
    <div id="tweethandle">
      <h2>@Drakejon</h2>
</div>
    <div id="tweettime">10m</div>
  </div>
  <div>
    <p>Exceptional Buys Ranger To Give Monitoring Shot In The Arm To Its 'DevOps' Platform <a href="http://tcrn.ch/11m3BrO">http://tcrn.ch/11m3BrO</a> by <a href="#">@sohear</a> </p>
  </div>
</div>
</div>

<!-------------Tool Bar -------------------------------->
<div id="toolbar">
<div class="toolset">reply</div>
<div class="toolset">Retweet</div>
<div class="toolset">Favorite</div>
<div class="toolset">Track</div>
<div class="toolset">Details</div>
</div>
</div>
4

1 に答える 1

0

行う

$toolbar = $(.toolbar).clone();
$(this).after($toolbar);

私はあなたが次のようなことをしなければならないと思います

$(.toolbar).addClass("hidden");

それをdivに追加する前に、

if ($(.toolbar)).hasClass("hidden"){
    ...pulldown...
}

または、それを消えたままにし、追加後にプルダウンするための何か。

于 2012-12-01T20:38:27.987 に答える