2012-12-01 75 views
0

我正在使用Twitter提要的UI。我希望能夠在兩條推文中間打開面板,向下推送推文。這種功能可以在像TweetBot這樣的推特客戶端中看到。隨着流中的每條新推文都會彈出,它會將每個推文都推下。工具欄對於所有推文都是相同的。在兩條推文之間打開div面板?

以下是我對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> 

回答

0

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

我想你將不得不做像

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

,然後將其追加到div,然後做

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

或什麼能讓它消失後追加使其下拉。