0

私はこのようなslideToggle機能を持っています

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

私には目標IDがあり、それらのいずれかをクリックするとすべてドロップダウンしますが、コンテンツはクリックしたものにのみ表示されますが、これは問題ありませんが、選択したものだけにslideToggleドロップダウンを設定する方法はありますか?目標 ID を持つすべての div をドロップしない

編集

このプロジェクトの 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 だけでなく、すべてが下に移動します。

4

2 に答える 2

0 
    $("[id^=goal]").click(function(){
    $(this).slideToggle("slow");
});
于 2012-09-23T15:13:49.437 に答える
0

ここでjsfiddleを作成しました。それがあなたが探しているものであることを願っています。

このように、各 'div class="span4"' に 2 つの 'div class="widget" (Div1-Div4、Div2-Div5 など) が含まれるように、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 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」に追加しました

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

jquery コードの残りの部分は同じです。フィドルを見てください。これが役立つことを願っています。

于 2012-09-23T16:02:45.527 に答える