Question

考虑以下因素：

<div class="accordion-content">
    <div><?php the_field('f_1'); ?></div>
    <div><?php the_field('f_2'); ?></div>
    <div><?php the_field('f_3'); ?></div>
    <div><?php the_field('f_4'); ?></div>
    <div><?php the_field('f_5'); ?></div>
    <div><?php the_field('f_6'); ?></div>
    <div><?php the_field('f_7'); ?></div>
    <div><?php the_field('f_8'); ?></div>
    <div><?php the_field('f_9'); ?></div>
    <div><?php the_field('f_10'); ?></div>
    <div><?php the_field('f_11'); ?></div>
</div>

和样式

.accordion-content div:empty{display: none}

.accordion-content div:nth-of-type(odd) {
  background-color:#f0f0f1;
}

.accordion-content div:nth-of-type(even){
  background-color:#e1e1e4;
}

链接到静态小提琴示例http://codepen.io/whispering_jack/pen/yMWoZj

如果用户在字段中输入数据，则会显示内容，否则如果该字段为空则不会显示。

我想要实现的是条纹的交替颜色，但是当前的css也会对未显示的元素进行定位，因此如果所有字段都未填充，则颜色将不会交替显示。

任何人都可以建议一个解决方案，只针对显示的div交替背景颜色吗？欢迎CSS或SCSS选项，js最后的手段。

感谢。

编辑：仍在寻求一些帮助。

Answer 1

好的，经过一些实验并处理相关问题之后，解决方案是使用jquery循环遍历元素，如果跨度为空，则从dom中删除它。然后，这允许div：empty类触发。

成功！

编辑：所需的示例代码，适用于Wordpress的超轻型动态手风琴，可与高级自定义字段一起使用，轻松将其转换为插件。

HTML

 <div class="accordion-content default">
    <div><span><?php the_field(''); ?></span><span><?php the_field(''); ?></span></div>
    <div><span><?php the_field(''); ?></span><span><?php the_field(''); ?></span></div>
    <div><span><?php the_field(''); ?></span><span><?php the_field(''); ?></span></div>
    <div><span><?php the_field(''); ?></span><span><?php the_field(''); ?></span></div>
    <div><span><?php the_field(''); ?></span><span><?php the_field(''); ?></span></div>
    <div><span><?php the_field(''); ?></span><span><?php the_field(''); ?></span></div>
    <div><span><?php the_field(''); ?></span><span><?php the_field(''); ?></span></div>
    <div><span><?php the_field(''); ?></span><span><?php the_field(''); ?></span></div>
    <div><span><?php the_field(''); ?></span><span><?php the_field(''); ?></span></div>
    <div><span><?php the_field(''); ?></span><span><?php the_field(''); ?></span></div>
    <div><span>Years on Council</span><span><?php the_field(''); ?></span></div>
</div>

JQuery的

$(document).ready( function($) {
//for this element, iterate each object
$('.accordion-content div').each(function(i, obj) {
    //the object
var $this = $(this);
    //if the object is empty
if ($this.find('span:empty').length) {
    //remove from dom (firing .element:empty:{display:none})
    $this.remove();
};
});


//Hide all the other panels except the first
$(".accordion-content:not(:first)").hide();
//onclick
$('#accordion').find('.accordion-toggle').click(function(){

  //Expand or collapse this panel
  $(this).next().slideToggle('fast');

  //And, Hide the other panels
  $(".accordion-content").not($(this).next()).slideUp('fast');

});
});
//set the background color
var color="rgba(255,222,0,";
//change the background color of .element
function repaint() {
    //how many of this class?
  var all = $('.accordion-toggle').length,
      //opacity 1 - 10 divided by no. elements
      total = 10/all;
//iterate over each element
  $('.accordion-toggle').each(function(i){
        //countdown the elements and for each divide by total element by 10
    var opacity = (total*(all-i))/10,
            //join $opacity to $color and finish it
        newTone = color+opacity+")";
      //set the background color of the element to the new color
    $(this).css('background-color',newTone)
  })
}
repaint()

CSS

/*--------------------------------------------------------------
## LIGHTWEIGHT ACCORDIAN
--------------------------------------------------------------*/
#accordion{width:100%;margin: 0 20px}

#accordion .type-freeman{margin-bottom:0;}

.accordion-toggle {cursor: pointer;}
.accordion-content {display: none;}
.accordion-content.default {display: block;}

.accordion-toggle{
  margin:0;
  padding:20px 20px;
}
.accordion-content div{margin:0;padding:16px 20px;}

.accordion-content div:empty{display: none}

.test{display: none}

.accordion-content div:nth-of-type(odd) {
  background-color:#f0f0f1;
}

.accordion-content div:nth-of-type(even){
  background-color:#e1e1e4;
}


.accordion-content div span:first-of-type{
 text-align: left;
    display: inline-block;
    width: 50%
}

.accordion-content div span:last-of-type{
 text-align: right;
     display: inline-block;
    width: 50%
}

样式奇数和偶数兄弟元素 - 不包括那些设置为display：none

1 个答案: