Question

我的代码设置为使用Wordpress Customizer通过选项（简单隐藏/显示，侧边栏的左/右位置）更改网站布局。

$wp_customize->add_setting(
        'sidebar_display',
        array(
            'default'      => '',
            'section'      => 'layout',
            'sanitize_callback' => 'sanitize_layout'
        )
    );
$wp_customize->add_control('sidebar_display', array(
  'label'      => __('Sidebar Display', ' '),
  'section'    => 'layout',
  'settings'   => 'sidebar_display',
  'type'       => 'radio',
  'choices'    => array(
    'inline-block'   => 'Display',
    'none'  => 'Hide',
  ),
));

CSS

#sidebar-primary {display:  <?php echo $sidebar_display; ?>;}

由于主要内容的图像（不在侧边栏中）会在显示或不显示侧边栏时更改其尺寸，因此我遇到了问题。我正在寻找一种方法来修改css规则width:，其中有些内容可以说＆＃34;如果侧边栏是display:inline-block，.element img {width:76%}，则{{1} }＆＃34;

我做了一些研究，我相信我可以用LESS（？）实现这个目标，但还有其他方法吗？我很高兴对我的问题有任何建议！

Answer 1

由于CSS无法处理这样的条件，因此无法使用纯CSS进行此操作。

JavaScript似乎是适合您的选择。

如果你使用jQuery一个非常强大的JavaScript框架jQuery，这真的很容易。代码应该是这样的：

＆＃13;

var display = $("#sidebar").css("display");

var percentage;

if(display == "inline-block"){
  
  percentage = "76%";
  
}
else{
  
  percentage = "100%";
  
}
$("#result").css("width",percentage);
$("#result").html("This one is "+percentage);

＆＃13;

#sidebar{
  
  display: inline-block;
    
}

#result{
  
  height: 50px;
  background-color: red;
  
}


#compare{
  
  height: 50px;
  width: 100%;
  background-color: green;
  
}

＆＃13;

<!-- This is the jQuery framework -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="sidebar"></div>

<div id="compare">This one is 100%</div>
<div id="result"></div>

＆＃13;

设置另一个时修改CSS规则

1 个答案: