Question

<div class="video-embeds" style="margin-top: 0px;
margin-top: 0px;
    width: 950px;
    float: left;
    display: inline-block;
">
<div class="video-embed" style="margin-top: 0px;">
<?php

$url1 = get_post_meta( $post->ID , 'video_play' , true );
$search     = '#(.*?)(?:href="https?://)?(?:www\.)?(?:youtu\.be/|youtube\.com(?:/embed/|/v/|/watch?.*?v=))([\w\-]{10,12}).*#x';
$replace    = 'http://www.youtube.com/embed/$2';
$url        = preg_replace($search,$replace,$url1);

?>

<iframe width="560" height="315" src="<?php echo $url; ?>" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

</div>
</div>

这个应该改变：

<div class="video-embeds" style="margin-top: 0px;
margin-top: 0px;
    width: 950px;
    float: left;
    display: inline-block;
">

为：

<div class="video-embeds" style="margin-top: 0px;
margin-top: 0px;
    width: 100%;
    float: left;
    display: inline-block;
">

正如你可以看到它将div更改为全宽父div或100％，或者是950px（取决于媒体屏幕大小，它的变量），它应该是按钮。

最简单的解决办法是什么？

<script type="text/javascript">
   function changec() {
       var xDiv = document.getElementsByClassName('video-embeds');

       if (xDiv.style.width == '') 
           xDiv.style.width = '950px'
       else 
           xDiv.style.width = '100%'
}
</script>

<div id="menu" onclick="changec()">&#8801;</div>

尝试过这个脚本，但变量xDiv.style.width = '950px'不能保持不变，因为响应式css会导致css发生变化，并且onclick也不会返回它。

Answer 1

为此您可以使用Javascript，并通过元素的ID调用Function，要更改设置，请在函数内部使用if子句：

var element = document.getElementById('divid'); 

if (element.style.width == '900px') element.style.width= '100%' else element.style.width = '900px' }

Answer 2

您可以识别<div>的状态，如果已点击或未使用课程。

function changec() {
       var xDiv = document.getElementsByClassName('video-embeds')[0];

       if (this.classList.contains('clicked'))  {
           xDiv.style.width = '950px'
           this.classList.remove('clicked')
       } else {
           xDiv.style.width = '100%'
           this.classList.add('clicked')
       }
}

或者你可以玩boolean旗帜

var clicked = false;
function changec() {
       var xDiv = document.getElementsByClassName('video-embeds')[0];

       if (!clicked)  {
           xDiv.style.width = '950px'
           clicked = true;
       } else {
           xDiv.style.width = '100%'
           clicked = false;
       }
}

在按钮上单击更改div宽度，在下一个按钮单击返回它原样？

2 个答案: