Javascript Css样式保持不变，即使与此样式关联的类被删除_Javascript_Html_Css_Responsive Design

Javascript Css样式保持不变，即使与此样式关联的类被删除

javascript html css responsive-design

Javascript Css样式保持不变，即使与此样式关联的类被删除,javascript,html,css,responsive-design,Javascript,Html,Css,Responsive Design,我对HTML、CSS和Javascript都很陌生，所以我希望你们能帮助我。这是到目前为止我的代码（我也在JSFIDLE上创建了这段代码，所以你们可以测试它：-那里的按钮有点奇怪，尽管在浏览器中看起来很好）： 1。HTML文件 1。项目全屏关闭这是信息 2。项目全屏关闭这是信息 2.CSS文件身体{ 保证金：0；背景色：黑色；溢出：自动； } .集装箱{ 位置：相对位置；顶部：50px；边缘底部：50px；左边距：250像素； } .项目{ 宽度：100px；高度：100p

我对HTML、CSS和Javascript都很陌生，所以我希望你们能帮助我。这是到目前为止我的代码（我也在JSFIDLE上创建了这段代码，所以你们可以测试它：-那里的按钮有点奇怪，尽管在浏览器中看起来很好）：

1。HTML文件
1。项目
全屏关闭
这是信息
2。项目
全屏关闭
这是信息
2.CSS文件
身体{
保证金：0；
背景色：黑色；
溢出：自动；
}
.集装箱{
位置：相对位置；
顶部：50px；
边缘底部：50px；
左边距：250像素；
}
.项目{
宽度：100px；
高度：100px；
位置：相对位置；
颜色：白色；
背景色：rgb（0，153，51）；
利润率：100px 0px；
垂直对齐：中间对齐；
线高：100px；
过渡：宽度2s，
左2秒，
高度2s；
将更改：宽度、左侧填充、高度；
光标：指针；
}
.project.isVisible{
宽度：650px；
左侧填充：50px；
}
.project.isVisible.expand{
宽度：80%；
高度：500px；
}
.prjText{
位置：相对位置；
左：-27px；
顶部：-50px；
高度：0px；
颜色：rgba（0,0,0,0）；
背景色：白色；
左侧填充：50px；
光标：指针；
过渡：高度2s，
颜色0s，
背景色0s；
将更改：高度、颜色、背景色；
}
.prjText.info\u展开{
高度：400px；
颜色：黑色；
背景色：白色；
}
.自定义按钮{
边框颜色：黑色；
边框样式：实心；
颜色：白色；
背景色：rgb（0，153，51）；
不透明度：0；
左：650px；
顶部：25px；
位置：绝对位置；
过渡：不透明度2s，
左2s；
将更改：不透明度，左侧；
}
.自定义按钮。图标\u展开{
不透明度：1；
左：995px；
}
3.Js文件
// 1. 滚动动画
//检测请求动画帧
var scroll=window.requestAnimationFrame||
//退路
函数（回调）{window.setTimeout（回调，1000/60）}；
var elementsToShow=document.querySelectorAll（'.showcoll'）；
函数循环（）{
Array.prototype.forEach.call（elementsToShow，function（element）{
if（IsElementViewPort（元素））{
element.classList.add（'isVisible'）；
}否则{
//element.classList.remove（'isVisible'）；
}
});
滚动（循环）；
}
//第一次调用循环
loop（）；
//辅助函数来自：http://stackoverflow.com/a/7557433/274826
函数IsElementViewPort（el）{
//为使用jQuery的用户提供特别奖励
if（jQuery的类型==“函数”&&el实例jQuery）{
el=el[0]；
}
var rect=el.getBoundingClientRect（）；
返回(
（rect.top=0）
||
（rect.bottom>=（window.innerHeight | | document.documentElement.clientHeight）&&
rect.top=0&&
rect.bottom因为您的按钮
位于DIV

当您单击按钮时，您也在单击DIV
和DIV
executeshowProject

您应该在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>


1.项目
这是信息
全屏关闭
2.项目
这是信息
全屏关闭
因为您有嵌套的onclick事件，内部onclick也会触发父onclick事件（传播）
您可以将事件从html传递到函数，只需调用
event.stopPropagation（）

这样，事件只会自行运行，而不会在链上传播click事件
下面是一个工作示例：
谢谢你的快速回答！我知道这个问题有一个简单的解决方案。因此，我学到了一些新的东西。如果这个答案对你有用，请选择它作为答案：）谢谢你的回答！两种解决方案对我来说都很好。但是，第一种解决方案保持了元素的对齐，所以我更喜欢这一种。但是你也帮助了我，谢谢！
<!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>