Accordion a lot DEPS

I'm posting a question because it keeps failing to execute while making accordion depth.

<html>
<div class="accordion">
                <div class="accordion_wrap">
                    <h2> Fashion Clothing/Underwear</h2>
                    <dl class="accordion_container">
                        <dt><a href="javascript:void(0)" class="accordion_toggle">Women's Clothing</a></dt>
                        <dd class="accordion_content">
                            <ul class="total">
                                <li>Full</li>
                            </ul>
                            <a href="javascript:void(0)"class="inner_toggle">Outer</a>
                            <ul class="product">
                                <li><ahref="javascript:void(0)">Jacket</a></li>
                                <li><ahref="javascript:void(0)"> Cashmere</a></li>
                                <li><ahref="javascript:void(0)"> Coat</a></li>
                                <li><ahref="javascript:void(0)"> Cardigan</a></li>
                                <li><ahref="javascript:void(0)">Jumper</a></li>
                                <li><ahref="javascript:void(0)">3depth Title</a></li>
                                <li><ahref="javascript:void(0)">3depth Title</a></li>
                                <li><ahref="javascript:void(0)">3depth Title</a></li>
                            </ul>
                        </dd>
                        <dd class="accordion_content">
                            <a href="javascript:void(0)"class="inner_toggle">2depth Title</a>
                            <ul class="product">
                                <li><ahref="javascript:void(0)">Jacket</a></li>
                            </ul>
                        </dd>
                        <dd class="accordion_content">
                            <a href="javascript:void(0)"class="inner_toggle">2depth Title</a>
                            <ul class="product">
                                <li><ahref="javascript:void(0)">Jacket</a></li>
                            </ul>
                        </dd>
                    </dl>
                </div>
    </html>
    <script>
    $('.accordion_wrap .depth1_tit').on('click', function (e) {
        console.log('test');
        e.preventDefault();

        $('.accordion_wrap .depth1_tit, .accordion_wrap .depth2_tit').removeClass('category_on');
        $('.accordion_wrap .depth2_wrap, .accordion_wrap .depth3_wrap').stop().slideUp();
        if (!$(this).next('.depth2_wrap').is(':visible')) {
            $(this).addClass('category_on');
            $(this).next('.depth2_wrap').stop().slideDown();
        }
    });

    $('.accordion_wrap .depth2_tit').on('click', function (e) {
        console.log('test');
        e.preventDefault();

        $('.accordion_wrap .depth2_tit').removeClass('category_on');
        $('.accordion_wrap .depth3_wrap').stop().slideUp();
        if (!$(this).next('.depth3_wrap').is(':visible')) {
            $(this).addClass('category_on');
            $(this).next('.depth3_wrap').stop().slideDown();
        }
    });`
`</script>

accordion

2022-09-21 19:52

1 Answers

I think you're making a very common component called the left menu of the website. There are so many coding patterns that I would like to recommend, so I would rather add a word to that.

There are many good examples that others have made. Please refer to it.

2022-09-21 19:52

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656