See jsFiddle Here

Question

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

我有一个带有动态子女数的父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>
 .....................

Answer 1

使用您的HTML更新

新jQuery

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

New jsFiddle Here

你可以使用jQueryUI accordion，但如果你想自己做，那就不难了。

See jsFiddle Here

代码如下：

基本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>

一个lil 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();
});

在jquery中使用slidetoggle

1 个答案:

New jsFiddle Here

See jsFiddle Here