0

私の問題はこれです。私のページには、製品/サービスの例を示す 3 つの個別のセクションがあります。必要なのは、製品の詳細を表示できる各セクションの下にトグル div を追加することですが、以前に明らかにされた他のセクションアンカーがクリックされたときに閉じる必要があります。

例はhttp://www.bamboohr.com/tour.phpにあります。

div が詳細情報を明らかにする方法を複製したいと思います。

どんな助けでも大歓迎です、ありがとう。

これが私のコードです：

-容器-

-section id="サービス"-

-div-

-a href=""--/a- (!-=== div を開くアンカー ===-)

-/div-

-div--/div-(!-=== 開く div ===-)

-/セクション-

-section id="サービス"-

-div-

-a href=""--/a- (!-=== div を開くアンカー ===-)

-/div-

-div--/div-(!-=== 開く div ===-)

-/セクション-

-section id="サービス"-

-div-

-a href=""--/a- (!-=== div を開くアンカー ===-)

-/div-

-div--/div-(!-=== 開く div ===-)

-/セクション-

-/容器-

4

1 に答える 1

0

jQueryのslideToggle機能を利用する

フィドルを試してみる

HTML

<div class="box">Click div1</div>
<div class="toggle_div">this is the content of toggle div 1</div>
<div class="box">Click div2</div>
<div class="toggle_div">this is the content of toggle div 2</div>
<div class="box">Click div3</div>
<div class="toggle_div">this is the content of toggle div 3</div>

CSS

.box {
    margin-bottom: 20px;
}
.toggle_div {
    border: 1px solid #000;
    background: #000;
    color: #fff;
    display: none;
}

JS

$('.box').click(function () {
    $('.active').slideToggle('slow', function() {
        $(this).removeClass('active');
    });
    $(this).next('div').addClass('active').slideToggle("slow")
});
于 2013-07-22T12:09:36.400 に答える