Question

我有一个使用W3.CSS框架的手风琴。我想在点击时调整显示手风琴标题（不是折叠面板）的大小，这样除了打开折叠面板之外，标题也会增长。在手风琴中，标题是从按钮创建的。这些按钮的背景是使用CSS中的封面样式填充的图片。我希望按钮的大小可以显示整个图像。我正在使用伪类：将鼠标悬停在按钮上并且工作正常，但是我无法获得：活动类，使用javascript进行伪或，以调整按钮的大小。任何想法可能会出错？

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

HTML

<div class = "hello">
<a id="edge">
<a href="#edge"><button id="edge" onclick="myFunction('Demo1')" class="w3-button w3-block w3-black w3-left-align"><h2 class="title">EDGE</h2></button></a>
</div>

<div id="Demo1" class="w3-hide">
<div class="w3-container">

＆＃34; w3-black＆＃34;我继续尝试使用W {CSS框架激活方法Ribbon。

功能

我知道这是在使用＆＃34;替换＆＃34;，这是我尝试过的最新内容。

function myFunction(id) {
var x = document.getElementById(id);
if (x.className.indexOf("w3-show") == -1) {
    x.className += " w3-show";
    x.previousElementSibling.className = 
x.previousElementSibling.className.replace("w3-black", "w3-red");
} else { 
    x.className = x.className.replace(" w3-show", "");
    x.previousElementSibling.className = 
x.previousElementSibling.className.replace("w3-red", "w3-black");
}
}

CSS

我根本没有改变尺寸，只是测试了不透明度，看看我是否可以让功能发挥作用。

#edge {
background-image: url(Pictures/Edge/Edge-Devices-Mockup.jpg);
background-size: cover;
background-position: center;
height: 16.67vh;
} 

.w3-black {
opacity: 1;
}

.w3-black:hover {
opacity: .5;
}

.w3-red {
opacity: 1;
}

希望有人能让我知道我哪里出错了！谢谢。

如何在点击时调整活动手风琴标题的大小？

0 个答案: