javascript - Open div panel inbetween two tweets?

Question

I'm working on a UI that has Twitter feeds. I want to be able to open a panel in the middle of two tweets, pushing the tweet below downwards. This functionality can be seen in tweet clients like TweetBot. As each new tweet in the stream popped up it would push each one below it down as well. Tool bar would be the same for all tweets.

Here is what I have for the 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;
        }
    });
});​

Here is the markup of the 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>

Answer 1

做

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

我想你将不得不做类似的事情

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

在将其附加到 div 之前，然后执行

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

或保持它消失并在附加后使其下拉的东西。