두 개의 짹짹 사이에 div 패널을여십시오.

트위터 피드가있는 UI에서 작업하고 있습니다. 아래의 트윗을 아래로 밀면서 두 개의 트윗 중간에 패널을 열 수 있기를 원합니다. 이 기능은 TweetBot과 같은 트윗 클라이언트에서 볼 수 있습니다. 스트림의 새로운 각각의 트윗이 나타 났을 때 각 트윗이 아래로 밀려 나왔습니다. 툴바는 모든 트윗에 대해 동일합니다. 당신이해야 할 것 같아요두 개의 짹짹 사이에 div 패널을여십시오.

  <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>

출처

2012-12-01 Tony

수행

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

: 여기

$(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의 마크 업입니다 : 여기

내가 JS에 대해 무엇을 가지고 예 :

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

당신은 사업부로 추가 한 다음 사라 유지하고 추가 후 풀다운을 만들기 위해

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

또는 뭔가를하기 전에.

출처

2012-12-01 20:38:27 SiddharthaRT

두 개의 짹짹 사이에 div 패널을여십시오.

답변

관련 문제