アコーディオンの次の要素が動かず固定してしまう

Question

アコーディオンで次の要素が動かず被ってしまう

jqueryでアコーディオンを作っているのですが、アコーディオンの動作的には問題ないものの、次の要素が動かずその場に固定しているため、アコーディオンの中身と被ってしまいます。
親ナビは横並びにして幅指定、子ナビは100％表示にしたいです。
![

<div class="accordion">
                <dl class=acc_inner">
                <dt>親ナビ1</dt>
                <dd>子ナビ</dd>
                </dl>
                <dl class=acc_inner">
                <dt>ナビ1</dt>
                <dd>子ナビ</dd>
                </dl>
　　　　　　　　　<dl class=acc_inner">
                <dt>ナビ1</dt>
                <dd>子ナビ</dd>
                </dl>
        </div>
    <p><a href="https://xxx.xxxjp">次に進む</p>

.accordion{
	position: relative;
    width: 100%;
    top: -310px;
    left: 105px;
}
dt{
	position: relative;
    float: left;
    width: 266px;
    margin: 0 10px 0;
}
dd{
	display: none;
    position: absolute;
    top: 95px;
    left: 0;
    width: 100%;
    background: #fff;
    text-align: center;
    padding: 30px 0;
}

 $(".accordion dt").click(function(){
    $(this).next("dd").slideToggle();
    $(this).next("dd").siblings("dd").slideUp();
    $(this).toggleClass("open");    
    $(this).siblings("dt").removeClass("open");
});

Comments

[cerfweb]

<dl class=acc_inner">の部分、ダブルクォーテーションが欠けていますよ。

[ayumi0925]

すみません、記載漏れでした。
ダブルクォーテーションがあってもイメージ通り動きませんでした。
よろしくお願いいたします。

Answer 1

$(this).next("dd").siblings("dd").slideUp();

上記の書き方では.siblingsが存在しない要素を指しています。
以下のようにすれば期待通りに動くのではと思いますがいかがでしょうか。

$('.accordion dt').on('click', function(){
	var $this = $(this),
		acc_inner = $this.parent().siblings('.acc_inner');

	acc_inner.children('dd').slideUp();
	acc_inner.children('dt').removeClass('open');
	$this.toggleClass('open').next('dd').slideToggle();
});

補足：繰り返し使うものは$this = $(this)のように変数にした方が処理が早くなります。

Comments

[ayumi0925]

ありがとうございます！
記載いただいたコードで試してみたのですが、直らずでした...
cssも自分で確認してみたところ、「次に進む」にpositionかかっていたのが原因でした。(記載漏れです...)
hieghtを指定して、親ナビにpositionで場所指定したら直りました！
丁寧に解説していただいたのにこちらの安易なミスでお時間取らせてしまってすみませんでした。
またわからないことがありましたら、よろしくお願いいたします！