0

当我尝试在 jquery 中使用 slidetoggle 属性时遇到了一些问题。我想要完成的是：

  • 我有一个带有动态数量的子 div 的父 div。
  • 当页面加载时，第一个 div 被切换（打开）。
  • 我想当我单击其中一个子 div 时，我单击的那个应该打开，而其他任何打开的 div 都应该关闭。

我试过这个：

   $i++;
   $("#items"+ $i).click(function(){
            $("#items'.$i.'-submenu").slideToggle('slow', function() {
                 if ( $("#item'.$i.'s-submenu").is(":visible")) {
                      $("#items'.$i.'").css("border-right","none");
            }
            else
            {
                $("#items'.$i.'").css("border-style","solid solid solid solid");
                $("#items'.$i.'").css("border-right-width","1px");
            }
            });

            return false;
        });

后期编辑：

HTML 看起来像：

<div class="item">Click here </div>
<div class="content">There it goes the hidden content</div>
<div class="item">Click here </div>
<div class="content">There it goes the hidden content</div>
<div class="item">Click here </div>
<div class="content">There it goes the hidden content</div>
<div class="item">Click here </div>
<div class="content">There it goes the hidden content</div>
<div class="item">Click here </div>
<div class="content">There it goes the hidden content</div>
<div class="item">Click here </div>
<div class="content">There it goes the hidden content</div>
<div class="item">Click here </div>
<div class="content">There it goes the hidden content</div>
<div class="item">Click here </div>
<div class="content">There it goes the hidden content</div>
 .....................
4

1 回答 1

1

使用您的 HTML 更新

新的 jQuery

$(".item").click(function(e) {
    $(this).next(".content").slideToggle().siblings(".content").each(function(i) {
        if ($(this).is(":visible")) $(this).slideToggle();
    });
});

新的 jsFiddle 在这里

你可以只使用jQueryUI 手风琴，但是如果你想自己做，这并不难。

在这里查看 jsFiddle

代码如下：

基本 HTML 布局

<div class="item">
    <p class="clickable">Click Here</p>
    <div class="content">
        I'm open!
        <br />
        I'm open!
        <br />
        I'm open!
    </div>
</div>
<hr />
<div class="item">
    <p class="clickable">Click Here</p>
    <div class="content">
        I'm open!
        <br />
        I'm open!
        <br />
        I'm open!
    </div>
</div>
<hr />
<div class="item">
    <p class="clickable">Click Here</p>
    <div class="content">
        I'm open!
        <br />
        I'm open!
        <br />
        I'm open!
    </div>
</div>
<hr />
<div class="item">
    <p class="clickable">Click Here</p>
    <div class="content">
        I'm open!
        <br />
        I'm open!
        <br />
        I'm open!
    </div>
</div>
<hr />
<div class="item">
    <p class="clickable">Click Here</p>
    <div class="content">
        I'm open!
        <br />
        I'm open!
        <br />
        I'm open!
    </div>
</div>​

一个小 CSS

.content { display: none; }
.clickable { cursor: pointer; }

最后一些 jQuery

$(".item").click(function(e) {
    $(this).siblings().each(function(i) {
        if ($(this).children(".content").is(":visible")) $(this).children(".content").slideToggle();
    });
    $(this).children(".content").slideToggle();
});​

​</p>

于 2012-10-29T18:58:31.787 回答