5

ユーザーがタイトルをクリックすると、次の div が表示を切り替えるページがあります。

他の div が display:block であるかどうかをどうにかして言いたいのですが、最初に何も表示しないように設定します。

私は次のものを持っています...

$('.office-title').click(function(){
     $(this).next('div').slideToggle();
     return false;
});

私のhtmlマークアップはそのままです...

<div class="office-row">
    <h3 class="office-title">Title</h3>
    <div class="office">sadasd</div>
</div>
<div class="office-row">
    <h3 class="office-title">Title</h3>
    <div class="office">sadasd</div>
</div>
<div class="office-row">
    <h3 class="office-title">Title</h3>
    <div class="office">sadasd</div>
</div>
4

5 に答える 5

17

</office>は有効な終了ではありません。クロージングは</div>

<div class="office-row">
        <h3 class="office-title">Title</h3>
        <div class="office">sadasd</div>
      </div>
    <div class="office-row">
        <h3 class="office-title">Title</h3>
        <div class="office">sadasd</div>
    </div>
    <div class="office-row">
        <h3 class="office-title">Title</h3>
        <div class="office">sadasd</div>
    </div>

CSS:

.office
{
    display: none;
}

そしてjquery：

$(function () {
    $('.office-title').click(function () {
        $(this).next('div').slideToggle();

        $(this).parent().siblings().children().next().slideUp();
        return false;
    });
});

ここで確認できます

于 2013-02-12T17:50:13.830 に答える
1 
$('.office-title').click(function(){
     $(this).next('div').slideToggle();
     $(this).parent(".office-row").siblings().hide(); // this should help
     return false;
});
于 2013-02-12T17:21:36.667 に答える