Question

我有一个针对我的“ sidenav”的自定义书面手风琴，这很简单，只需在click事件上添加类以触发和菜单项折叠，但是问题是当我单击折叠的<li>中的链接时页面开始重定向；我用javascript点击处理程序添加的所有类都被自动删除，而且看起来非常难看：

...，我该如何解决？这是我的javascript（jquery）和html代码：

$('.mine-trigger').click(function(){

        var 
        control_click       = $(this).hasClass('mine-trigger-open'),
        howmuchchildrens    = $(this).children('.mine-content').children('.mine-content__link').length,
        calcPixels          = (howmuchchildrens * 48) + 'px';

        if (control_click == false){
            $(this).addClass('mine-trigger-open');
            $(this).children('.mine-content').css('max-height', calcPixels);
        }
        if (control_click == true) {
            $(this).removeClass('mine-trigger-open');
            $(this).children('.mine-content').css('max-height', 0);
        }
    });

        <li class="mine-trigger">
            <a class="sidenav__link">
                <span class="sidenav__icon ico-person"></span>
                Cariler
            </a>
            <div class="mine-content">
                <a class="sidenav__link mine-content__link" href='<?php echo site_url('yonetim/cari')?>'>
                    <span class="sidenav__icon ico-person"></span>
                    Cari
                </a>    
                <a class="sidenav__link mine-content__link" href='<?php echo site_url('yonetim/personel')?>'>
                    <span class="sidenav__icon ico-assignment_ind"></span>
                    Personel
                </a>    
            </div>
        </li>

Answer 1

该事件是由LI触发的，因此“ this”将始终为.mine-trigger，单击任何子元素将切换关闭。检查event.target以确定单击是否在导航链接中，以确定是否应关闭手风琴。

$('.mine-trigger').click(function(e){
    var is_open = $(this).hasClass('mine-trigger-open');
    var from_link = is_open && $(e.target).closest('.mine-content__link').length == 1;

    if (!is_open) {
        // open accordion    
    } else if (is_open && !from_link) {
        // close accordion
    }

您还可以获取/设置cookie值或localStorage，以在浏览到的页面上重新打开手风琴。

Answer 2

简单地说，页面不会自动删除您已应用的类。

很明显，在单击封闭元素时，您有意应用它们，然后再删除它们并将子级的最大高度设置为0。

您正在为子级设置max-height属性，但它们的显示速度很慢。这似乎表明在应用“ mine-trigger-open”类时正在使用过渡。最大高度会立即设置，但实际高度会在一段时间内发生变化。

但是，当您采用另一种方法时，您会立即将max-height属性设置为0。即使height属性发生过渡，您也不会看到元素，因为它们已被隐藏。建议不要在此时应用max-height属性，而应在添加或删除“ mine-trigger-open”时将其显示在控制过渡的规则中。

为什么页面更改后DOM会自动删除我的类？

2 个答案: