的slideToggle功能將所有

我有一個的slideToggle功能這樣的slideToggle功能將所有

$(document).ready(function(){ 
    $(".widget-content-box").slideUp(); // $(".widget-content-box").hide() 
    $("[id^=goal]").click(function(){ 
     $(this).parent().next().slideToggle("slow"); 
    }); 
})

我有目標的ID，當你對他們中的任何一個點擊都降了下來，但內容只顯示了一個我點擊了，這是很好的，但有沒有辦法有下拉的slideToggle只是選擇了一個，而不是丟棄所有的div與目標ID

編輯

HTML爲這個項目

<div class="span4"> 
    <div class="widget"> 
    <div class="widget-header"> 
     <i class="icon-info-sign icon-large"></i> 
     <h3 id="goal1" class="clickme">Core</h3> 
    </div><!--/widgetheader--> 
    <div class="widget-content-box"> 
     <p>Hello</p> 


    </div><!--/widget content--> 
    </div><!--widget--> 
    </div><!--span4--> 

    <div class="span4"> 
    <div class="widget"> 
    <div class="widget-header"> 
     <i class="icon-info-sign icon-large"></i> 
     <h3 id="goal2" class="clickme">Marathon Runners</h3> 
    </div><!--/widgetheader--> 
    <div class="widget-content-box"> 
     <p>test</p> 


    </div><!--/widget content--> 
    </div><!--widget--> 
    </div><!--span4--> 

    <div class="span4"> 
    <div class="widget"> 
    <div class="widget-header"> 
     <i class="icon-info-sign icon-large"></i> 
     <h3 id="goal3" class="clickme">Biceps</h3> 
    </div><!--/widgetheader--> 
    <div class="widget-content-box"> 
     <p>content</p> 


    </div><!--/widget content--> 
    </div><!--widget--> 
    </div><!--span4--> 
    </div> 
    </div>

謝謝

任何幫助讚賞

編輯

我的頁面設置了像這樣

DIV1  DIV2  DIV3 
DIV4  DIV5  DIV6

所以當你點擊DIV1例如一切向下移動，而不僅僅是div1和div4。

來源

2012-09-23 Richlewis

你可以顯示一些與此JS相關的示例HTML嗎？ – Pandaiolo

已添加html – Richlewis

目前還不清楚你在問什麼。 slideUp/slideDown設置項目的高度，這就是動畫的方式。當你滑動它上面的內容時，它下面的項目將向下移動頁面。這就是你的HTML佈局的工作原理。 – jfriend00

$("[id^=goal]").click(function(){ 
    $(this).slideToggle("slow"); 
});

來源

2012-09-23 15:13:49

我已經創建jsfiddle here我希望這是你在找什麼。

我改變了你的html，讓每個'div class =「span4」'有兩個'div class =「widget」（Div1-Div4，Div2-Div5等）。

<div class="span4"> 
    <div class="widget"> 
     <div class="widget-header"> 
      <i class="icon-info-sign icon-large"></i> 
      <h3 id="goal1" class="clickme">Core</h3> 
     </div><!--/widgetheader--> 
     <div class="widget-content-box"> 
      <p>Hello</p> 
     </div><!--/widget content--> 
    </div><!--widget--> 
    <div class="widget"> 
     <div class="widget-header"> 
      <i class="icon-info-sign icon-large"></i> 
      <h3 id="goal1" class="clickme">Core</h3> 
     </div><!--/widgetheader--> 
     <div class="widget-content-box"> 
      <p>Hello</p> 
     </div><!--/widget content--> 
    </div><!--widget--> 
</div><!--span4-->

而且我已經添加以下CSS類 'span4'

的jQuery代碼

.span4{ 
    float:left; 
    margin : 20px; 
    width:70px; 
}

休息是相同的。看看小提琴，我希望這有助於。

來源

2012-09-23 16:02:45

的slideToggle功能將所有

回答

相關問題