javascript - 无法隔离正确的 clientHeight 值

Question

我不得不创建一个快速但肮脏的展开/折叠功能来复制不需要使用 jQuery 的现有行为，因为现有方法使用 jQuery 并且存在一些需要大量调试才能解决的冲突。

最初我决定使用纯 CSS，但想不出一种方法使其在必要时可以无限扩展，所以我选择使用一点 JavaScript 来实现这一神奇效果。

我将发布代码，对其进行解释，然后用 fiddle 进行说明:

JavaScript:

<script>
    function cflExpandingContent(e, b) {
        e = document.getElementById(b);

        if(e.style.height != '25px') {
            e.style.height = '25px';
        } else {
            c = document.querySelector('.cflExpandContent, .' + b);
            e.style.height = e.clientHeight + c.clientHeight + 'px';
        }
    }
</script>

CSS:

.expandable {
    overflow: hidden;
    -moz-transition: all 1s ease-in-out;
     -ms-transition: all 1s ease-in-out;
      -o-transition: all 1s ease-in-out;
 -webkit-transition: all 1s ease-in-out;
         transition: all 1s;
}

HTML:

<!-- Begin Expand/Collapse -->
<div id="sbb1" class="expandable" style="height: 25px;">
    <a href="#!" onclick="cflExpandingContent(this, 'sbb1'); return false">CLICK HERE TO EXPAND >></a>
    <ul class="cflExpandContent sbb1">
        [cflproducts]ProductName[/cflproducts]
    </ul>
</div>
<!-- End Expand/Collapse -->

Wordpress 简码:

function get_brand_products( $atts, $brand = null ) {

    $prods = get_posts( array(
        'posts_per_page' => -1,
        'product_cat' => "$brand",
        'post_type' => 'product',
        'orderby' => 'title' ) );

        foreach( $prods as $prod ) {
            $products .= '<li><a href="' . get_permalink( $prod->ID ) . '">' . $prod->post_title . '</a></li>';
        }
    return $products;
}

add_shortcode( 'cflproducts', 'get_brand_products' )

因此，从下往上开始，短代码连接到预先存在的 WooCommerce 数据库，检索给定品牌的所有产品，遍历产品并构建包含 li 元素的列表链接和标题。

HTML 有一个 div，其中包含自定义短代码标签并定义要传递给函数的品牌参数。 div 设置为固定高度，溢出设置为通过 CSS 隐藏。

显示的是一个带有 onclick 事件的链接，该事件触发放置在主题页脚中的 JavaScript。

该脚本采用两个参数，触发函数调用的当前元素:this 和唯一元素标识符 (ID)。这样做是因为有一个由 6 个这样的 block 组成的网格，我希望代码尽可能可重用。

获取脚本参数，首先获取被操作的div元素，然后进行校验；如果 style="height: 25px"不是 25px，它会将其设置为 25px(这是“折叠”机制)。但是，如果元素高度是 25px，即它是“封闭的”，它会得到(无论如何应该是)元素的全高值，包括隐藏的内容。

当元素高度设置为固定值时，CSS 转换代码开始运行并显示流畅的打开/关闭动画。

这是带有虚拟内容的 fiddle 来说明不同的高度:https://jsfiddle.net/5uzxLd5p/8

代码在技术上“有效”，但并不令我满意。当脚本运行时 c = document.querySelector('.cflExpandContent, .' + b); 它没有抓取正确的元素，它默认为:

<ul class="cflExpandContent sbb1">...</ul>

与激活的链接无关。即，如果单击 sbb2，它仍然会查找并获取 sbb1 的 .cflExpandContent UL。

如果我改为将元素高度硬编码为“自动”，它会正确地将任何元素打开到适当的高度，但会中断 CSS 过渡。

有什么办法解决这个问题吗？

提前致谢

Answer 1

呃。

这种愚蠢的错误/疏忽。

问题是我删除了 UL 标签的 CSS 类，而不是组合它们。

工作代码:

<script>
    function cflExpandingContent(e, b) {
        e = document.getElementById(b);

        if(e.style.height != '25px') {
            e.style.height = '25px';
        } else {
            c = document.querySelector('.cflExpandContent.' + b);
            e.style.height = e.clientHeight + c.clientHeight + 'px';
        }
    }
</script>

~鳍~