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我希望它是你正在寻找的。

我已经更改了您的 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 代码的其余部分是相同的。看看小提琴，我希望这会有所帮助。

于 2012-09-23T16:02:45.527 回答