Question

我正在开发具有Twitter Feed的UI。我希望能够在两条推文的中间打开一个面板，将下面的推文向下推。在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>

Answer 1

待办事项

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

我猜你必须做类似

的事情

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

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

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

或其它东西让它消失，并在追加后拉下来。

在两条推文之间打开div面板？

1 个答案: