Css 样式保持不变，即使删除了与此样式关联的 class

Question

我对 HTML、CSS 和 Javascript 很陌生，所以希望你们能帮助我。到目前为止，这是我的代码（我也在 JSFiddle 上创建了这段代码，所以你们可以测试它：https://jsfiddle.net/veka33/f80sbqrc/1/ - 尽管在浏览器中它看起来不错，但那里的按钮有点奇怪）：

1. HTML-file

<!DOCTYPE HTML>
<html>
<head>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
    <div class="container" style="margin-top: 200px;">
        <div class="project showScroll" id="project1" onclick="showProject('1')">
            <p style="font-size: 30px;">1. Projekt</p>
            <button class="custom_button" id="close1" onclick="hideProject('1')"><i class="material-icons">close_fullscreen</i></button>
            <div id="projectText1" class="prjText">
                <p>Here is the information</p>
            </div>
        </div>
        <div class="project showScroll" id="project2" onclick="showProject('2')">
            <p style="font-size: 30px;">2. Projekt</p>
            <button class="custom_button" id="close2" onclick="hideProject('2')"><i class="material-icons">close_fullscreen</i></button>
            <div id="projectText2" class="prjText">
                <p>Here is the information</p>
            </div>
        </div>
    </div>
    <script src="scripts.js"></script>
</body>
</html>

2. CSS-file

body {
    margin: 0;
    background-color: black;
    overflow: auto;
}

.container {
    position: relative;
    top: 50px;
    margin-bottom: 50px;
    margin-left: 250px;
}

.project {
    width: 100px;
    height: 100px;
    position: relative;
    color: white;
    background-color: rgb(0, 153, 51);
    margin: 100px 0px;
    vertical-align: middle;
    line-height: 100px;
    transition: width 2s,
                padding-left 2s,
                height 2s;
    will-change: width, padding-left, height;
    cursor: pointer;
}

.project.isVisible {
    width: 650px;
    padding-left: 50px;
}

.project.isVisible.expand {
    width: 80%;
    height: 500px;
}

.prjText {
    position: relative;
    left: -27px;
    top: -50px;
    height: 0px;
    color: rgba(0,0,0,0);
    background-color: white;
    padding-left: 50px;
    cursor: pointer;
    transition: height 2s,
                color 0s,
                background-color 0s;
    will-change: height, color, background-color;
}

.prjText.info_expand {
    height: 400px;
    color: black;
    background-color: white;
}

.custom_button {
    border-color: black;
    border-style: solid;
    color: white;
    background-color: rgb(0, 153, 51);
    opacity: 0;
    left: 650px;
    top: 25px;
    position: absolute; 
    transition: opacity 2s,
                left 2s;
    will-change: opacity, left;
}


.custom_button.icon_expand {
    opacity: 1;
    left: 995px;
}

3. Js-file

// 1. Scroll animation
// Detect request animation frame
var scroll = window.requestAnimationFrame ||
             // IE Fallback
             function(callback){ window.setTimeout(callback, 1000/60)};
var elementsToShow = document.querySelectorAll('.showScroll'); 

function loop() {

    Array.prototype.forEach.call(elementsToShow, function(element){
      if (isElementInViewport(element)) {
        element.classList.add('isVisible');
      } else {
        // element.classList.remove('isVisible');
      }
    });

    scroll(loop);
}

// Call the loop for the first time
loop();

// Helper function from: 
function isElementInViewport(el) {
  // special bonus for those using jQuery
  if (typeof jQuery === "function" && el instanceof jQuery) {
    el = el[0];
  }
  var rect = el.getBoundingClientRect();
  return (
    (rect.top <= 0
      && rect.bottom >= 0)
    ||
    (rect.bottom >= (window.innerHeight || document.documentElement.clientHeight) &&
      rect.top <= (window.innerHeight || document.documentElement.clientHeight))
    ||
    (rect.top >= 0 &&
      rect.bottom <= (window.innerHeight || document.documentElement.clientHeight))
  );
}

// 2. Show and hide Projects

function showProject(no){
    var prj = "project" + no;
    var element = document.getElementById(prj);
    element.classList.add("expand");
    document.getElementById(("projectText"+no)).classList.add("info_expand");
    document.getElementById(("close"+no)).classList.add("icon_expand");
}

function hideProject(no){
    var prj = "project" + no;
    var element = document.getElementById(prj);
    element.classList.remove("expand");
    document.getElementById(("projectText"+no)).classList.remove("info_expand");
    document.getElementById(("close"+no)).classList.remove("icon_expand");
}

我的问题是，当我点击 id 为 'project1' 和 'project2' 的 div 时，样式发生了变化，因为我添加了三个类 ('.expand','. info_expand','.icon_expand') 到这些 div 和 div 中的对象具有不同的样式。这些类使用 java 函数 'hideProject()' 删除。但是，即使样式所基于的类被删除，样式仍保持不变。我真的不明白这怎么会发生？希望大家帮帮我，谢谢！

Answer 1

因为你的 Button 在 DIV

里面

当你点击按钮时，你同时点击了DIV并且DIV执行showProject

你应该在 DIV 之外的 HTML 中定义你的按钮，如下所示：

<!DOCTYPE HTML>
<html>
<head>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
    <div class="container" style="margin-top: 200px;">
        <div class="project showScroll" id="project1" onclick="showProject('1')">
            <p style="font-size: 30px;">1. Projekt</p>
            <div id="projectText1" class="prjText">
                <p>Here is the information</p>
            </div>
        </div>

        <button class="custom_button" id="close1" onclick="hideProject('1')"><i class="material-icons">close_fullscreen</i></button>


        <div class="project showScroll" id="project2" onclick="showProject('2')">
            <p style="font-size: 30px;">2. Projekt</p>
            <div id="projectText2" class="prjText">
                <p>Here is the information</p>
            </div>
        </div>

        <button class="custom_button" id="close2" onclick="hideProject('2')"><i class="material-icons">close_fullscreen</i></button>

    </div>
    <script src="scripts.js"></script>
</body>
</html>

Answer 2

因为你嵌套了onclick事件，内层的onclick也会触发父onclick事件（传播）。

您可以将事件从 html 传递给函数，然后调用

event.stopPropagation()

这样事件只会运行本身而不会将点击事件传播到链上。

这是一个工作示例：

https://jsfiddle.net/twxn48oL/

Css 样式保持不变，即使删除了与此样式关联的 class

Css style stays the same even though class associated with this style is removed

html

javascript

css

responsive-design