0

jqueryでslidetoggleプロパティを操作しようとすると、いくつかの問題が発生します。私が達成したいことは次のとおりです。

  • 動的な数の子 div を持つ親 div があります。
  • ページが読み込まれると、最初の div が切り替えられます (開く)。
  • 子 div の 1 つをクリックすると、クリックしたものが開き、開いている他のものが閉じます。

私はこれを試しました：

   $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 accordionを使用することもできますが、自分でやりたい場合は難しくありません。

ここで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 に答える