Javascript 单击后保持jquery.addClass活动，如果不按住鼠标，我的div就会恢复_Javascript_Jquery_Html_Css

Javascript 单击后保持jquery.addClass活动，如果不按住鼠标，我的div就会恢复

javascript jquery html css

Javascript 单击后保持jquery.addClass活动，如果不按住鼠标，我的div就会恢复,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有一个动画，当你点击div时，它会展开一个平铺的div标签，但是我似乎无法在点击后保持活动类，我必须按住鼠标按钮，否则它会恢复到以前的大小，我不知道为什么我没有创建JFIDLE，因为如果没有我的定制工具，很难让一切正常工作这是一个活生生的例子我的朋友用一个JSFIDLE帮我解决了这个问题，它可以工作，但当我用代码复制时，它就不起作用了解决 body{ background: url(../images/banner.jpg); background-size: 20

我有一个动画，当你点击div时，它会展开一个平铺的div标签，但是我似乎无法在点击后保持活动类，我必须按住鼠标按钮，否则它会恢复到以前的大小，我不知道为什么

我没有创建JFIDLE，因为如果没有我的定制工具，很难让一切正常工作

这是一个活生生的例子

我的朋友用一个JSFIDLE帮我解决了这个问题，它可以工作，但当我用代码复制时，它就不起作用了

解决

body{
    background: url(../images/banner.jpg);
    background-size: 2000px 2000px;
    background-repeat: no-repeat;
}

#content{
    top:55px;
    position:absolute;
    margin:0px;
    left:7%;
}


.tile-container{
  float:left;
  margin:5px;
  width:400px;
  height:200px;
  overflow:hidden;
   -webkit-transition: all .2s ease-in-out;
   -webkit-transform: scale(1.0);
   -moz-transition: all .2s ease-in-out;
   -moz-transform: scale(1.0);
   -o-transition: all .2s ease-in-out;
   -o-transform: scale(1.0);
   transition: all .2s ease-in-out;
   transform: scale(1.0);
}

/*.tile-container:active,
.tile-container .test {
   -webkit-transform: translate(0px,-100%);
   -moz-transform: translate(0px,-100%);
   -o-transform: translate(0px,-100%);
   transform: translate(0px,-100%);

   -webkit-transition: all .2s ease-in-out;
   -webkit-transform: scale(1.0);
   -moz-transition: all .2s ease-in-out;
   -moz-transform: scale(1.0);
   -o-transition: all .2s ease-in-out;
   -o-transform: scale(1.0);
   transition: all .2s ease-in-out;
   transform: scale(1.0);
   width:450px;
   height:350px;
}

/*.tile-container:active > .tile,
.tile-container .test > .tile {
   -webkit-transform: translate(0px,-100%);
   -moz-transform: translate(0px,-100%);
   -o-transform: translate(0px,-100%);
   transform: translate(0px,-100%);
   background-size: 450px 350px;

}
*/
.tile-container{
  float:left;
  margin:5px;
  width:400px;
  height:200px;
  background-color: #0000FF;
  overflow:hidden;
   -webkit-transition: all .2s ease-in-out;
   -webkit-transform: scale(1.0);
   -moz-transition: all .2s ease-in-out;
   -moz-transform: scale(1.0);
   -o-transition: all .2s ease-in-out;
   -o-transform: scale(1.0);
   transition: all .2s ease-in-out;
   transform: scale(1.0);
   background-size: 450px 350px;
}

.tile-container.beenclicked {
   -webkit-transform: translate(0px,-100%);
   -moz-transform: translate(0px,-100%);
   -o-transform: translate(0px,-100%);
   transform: translate(0px,-100%);

   -webkit-transition: all .2s ease-in-out;
   -webkit-transform: scale(1.0);
   -moz-transition: all .2s ease-in-out;
   -moz-transform: scale(1.0);
   -o-transition: all .2s ease-in-out;
   -o-transform: scale(1.0);
   transition: all .2s ease-in-out;
   transform: scale(1.0);
   background-size: 450px 350px;
   width:450px;
   height:350px;
}

.tile-container.beenclicked > .tile{
   -webkit-transform: translate(0px,-100%);
   -moz-transform: translate(0px,-100%);
   -o-transform: translate(0px,-100%);
   transform: translate(0px,-100%);
   background-size: 450px 350px;

}


.tile{
  background:inherit;
  width:inherit;
  height:inherit;
  float:left;
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
  padding:10px;
  color:#fff;
}

.circular {
    width: 50px;
    height: 50px;
    border-radius: 150px;
    -webkit-border-radius: 150px;
    -moz-border-radius: 150px;

    }

.circular img {
    opacity: 0;
    filter: alpha(opacity=0);
    border:10px;
    border-color:#fff;
    }

/*
.active-tile > .tile{
  -webkit-transform: translate(0px,-100%);
  -moz-transform: translate(0px,-100%);
  -o-transform: translate(0px,-100%);
  transform: translate(0px,-100%);
}
*/


<html>
    <head>
        <title>Relic</title>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="css/MetroJs.css">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/cover.css" rel="stylesheet">
<script src="js/MetroJs.js"></script>
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript" src="js/social.js"></script>     

<script>
        document.write('<base href="' + document.location + '" />');


$( document ).ready(function() {
    $(".tile-container").click(function(){
            $(this).toggleClass("beenclicked");
    });
});

</script>

</head>

<body class="metro" ng-app="userProfile" ng-controller="ProfileController as post">

    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Relic</a>
        </div>
        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>

<div id="content">

                <div class="tile-container" ng-repeat="userpost in post.userPost" >
                    <div class="tile" style="background-image: url('{{userpost.image}}');" >
                        <div class="circular" style="background: url(' {{post.user.profileimage}} ') no-repeat; background-size: 50px 50px; border:5px; border-color:#fff;"></div>
                        <div class="weather-text">
                          <span class="location">{{userpost.title}}</span>
                        </div>
                    </div>
                    <div class="tile" style="background-image: url('{{userpost.image}}');" >
                       <div class="circular" style="background: url(' {{post.user.profileimage}} ') no-repeat;  background-size: 50px 50px; border:5px; border-color:#fff;"></div>
                        <div class="weather-text">
                          <span class="temperature">{{userpost.message}}</span>
                        </div>
                    </div>
                </div>

</div>

</body>
</html>

正文{
背景：url（../images/banner.jpg）；
背景尺寸：2000px 2000px；
背景重复：无重复；
}
#内容{
顶部：55px；
位置：绝对位置；
边际：0px；
左：7%；
}
.瓷砖容器{
浮动：左；
保证金：5px；
宽度：400px；
高度：200px；
溢出：隐藏；
-webkit转换：所有.2易入易出；
-webkit转换：比例（1.0）；
-moz转换：所有.2秒的输入输出；
-moz变换：比例（1.0）；
-o-转换：所有.2缓进-缓出；
-o变换：比例（1.0）；
转换：所有.2易入易出；
变换：比例（1.0）；
}
/*.磁贴容器：活动，
.瓦片容器.测试{
-webkit转换：翻译（0px，-100%）；
-moz变换：平移（0px，-100%）；
-o变换：平移（0px，-100%）；
转换：转换（0px，-100%）；
-webkit转换：所有.2易入易出；
-webkit转换：比例（1.0）；
-moz转换：所有.2秒的输入输出；
-moz变换：比例（1.0）；
-o-转换：所有.2缓进-缓出；
-o变换：比例（1.0）；
转换：所有.2易入易出；
变换：比例（1.0）；
宽度：450px；
高度：350px；
}
/*.tile容器：活动>.tile，
.tile容器.test>.tile{
-webkit转换：翻译（0px，-100%）；
-moz变换：平移（0px，-100%）；
-o变换：平移（0px，-100%）；
转换：转换（0px，-100%）；
背景尺寸：450px 350px；
}
*/
.瓷砖容器{
浮动：左；
保证金：5px；
宽度：400px；
高度：200px；
背景色：#0000FF；
溢出：隐藏；
-webkit转换：所有.2易入易出；
-webkit转换：比例（1.0）；
-moz转换：所有.2秒的输入输出；
-moz变换：比例（1.0）；
-o-转换：所有.2缓进-缓出；
-o变换：比例（1.0）；
转换：所有.2易入易出；
变换：比例（1.0）；
背景尺寸：450px 350px；
}
.瓦片容器{
-webkit转换：翻译（0px，-100%）；
-moz变换：平移（0px，-100%）；
-o变换：平移（0px，-100%）；
转换：转换（0px，-100%）；
-webkit转换：所有.2易入易出；
-webkit转换：比例（1.0）；
-moz转换：所有.2秒的输入输出；
-moz变换：比例（1.0）；
-o-转换：所有.2缓进-缓出；
-o变换：比例（1.0）；
转换：所有.2易入易出；
变换：比例（1.0）；
背景尺寸：450px 350px；
宽度：450px；
高度：350px；
}
.tile-container.beinclicked>.tile{
-webkit转换：翻译（0px，-100%）；
-moz变换：平移（0px，-100%）；
-o变换：平移（0px，-100%）；
转换：转换（0px，-100%）；
背景尺寸：450px 350px；
}
.瓷砖{
背景：继承；
宽度：继承；
身高：继承；
浮动：左；
-webkit转换：所有.2易入易出；
-moz转换：所有.2秒的输入输出；
-o-转换：所有.2缓进-缓出；
转换：所有.2易入易出；
填充：10px；
颜色：#fff；
}
.通告{
宽度：50px；
高度：50px；
边界半径：150px；
-webkit边界半径：150px；
-moz边界半径：150px；
}
.圆形img{
不透明度：0；
过滤器：alpha（不透明度=0）；
边界：10px；
边框颜色：#fff；
}
/*
.active tile>.tile{
-webkit转换：翻译（0px，-100%）；
-moz变换：平移（0px，-100%）；
-o变换：平移（0px，-100%）；
转换：转换（0px，-100%）；
}
*/
遗迹
文件。写（“”）；
$（文档）.ready（函数（）{
$（“.tile容器”）。单击（函数（）{
$（this.toggleClass（“beenclicked”）；
});
});
切换导航





{{userpost.title}
{{userpost.message}

我想我看到了问题所在。使用Google Chrome，inspect元素调试您的网站。按F12键，单击放大镜图标，然后选择要调试的元素

jQuery的基础知识，在运行任何脚本之前检查DOM是否已完全加载

$( document ).ready(function() {
    $(".tile").click(function(){
            $(this).addClass("active");
    });
});

按住鼠标时会触发“活动”css状态。按下按钮将从元素中删除“活动”状态

您要做的是改用“.active”类：

原创的

$(".title-container").click(function(){
        $(this).addClass("active");
});

.tile容器：活动{…}

纠正

$(".tile").click(function(){
        $(this).addClass("active");
});

.tile容器。活动{…}

单击方形平铺时，实际上是在单击类为“tile”的元素。我是用放大镜发现的

此外，我认为您将“瓷砖容器”和“标题容器”混淆了。请注意附加的“t”

您需要更改jQuery以将活动类添加到类为“tile”的元素中

原创的

$(".title-container").click(function(){
        $(this).addClass("active");
});

纠正

$(".tile").click(function(){
        $(this).addClass("active");
});

差不多了

在css中，您只定义了

：active

伪类

试用：

.tile-container:active, 
.tile-container.active {}
.tile-container:active > .tile, 
.tile-container.active > .tile {}

查看有关伪类的更多信息。

您需要停止使用与@AmuletxHeart类似的“活动”伪类。卸下.tile容器