Question

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

最初我决定使用纯CSS，但是如果有必要的话，我无法想出一种可以无限扩展的方法，所以我选择使用一些JavaScript来实现神奇的工作。

我会发布代码，解释它，然后用小提琴说明：

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 Shortcode：

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个这样的块的网格，我希望代码尽可能可重用。

采用脚本参数，它首先得到 div 元素被操纵，然后进行检查;如果风格=＆＃34;身高：25px＆＃34;它不是25px，它将它设置为25px（这是＆＃34;崩溃＆＃34;机制）。但是，如果元素高度为25px，即它关闭＆＃34;它得到了元素的全高度值（假设无论如何），包括隐藏的内容。

当元素高度设置为固定量时，CSS转换代码会启动并显示平滑的打开/关闭动画。

这里是虚构内容的小提琴，用于说明不同的高度：https://jsfiddle.net/5uzxLd5p/8

技术上的代码＆＃34;工作＆＃34;但不是让我满意。当脚本运行 c = document.querySelector（＆＃39; .cflExpandContent，。＆＃39; + b）; 时，它不会抓取正确的元素，它是默认的到：

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

无论激活的链接如何。即，如果单击sbb2，它仍然会查找并获取sbb1＆＃39; s .cflExpandContent UL。

如果我改为将元素高度硬编码为＆＃39; auto＆＃39;它正确地打开了适当高度的元素，但打破了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>

~fin~

无法隔离正确的clientHeight值

1 个答案: