Question

我有像这样的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。

Answer 1

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

Answer 2

我创建了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'

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

其余的jquery代码是相同的。看看小提琴，我希望这会有所帮助。

slideToggle函数全部移动

2 个答案: