当我选择卡片中的“了解更多”按钮时,我在尝试切换课程时遇到了麻烦。我试图让它影响我选择的按钮的父级,但是所有共享同一类的卡都会受到影响。
我没有使用ID,因为生成的卡数量会因另一方面而异。
(function() {
$(".show-more, .show-less").click(function() {
$(".card")
.toggleClass("card--small")
.toggleClass("card--medium");
$(".show-less").toggleClass("hide");
$(".show-more").toggleClass("hide");
});
})();
@import url(https://fonts.googleapis.com/css?family=Roboto:400,700,300);
:root {
-webkit-transition: all 300ms;
transition: all 300ms;
}
:root.bg--medium {
background-color: #E53935;
}
:root.bg--small {
background-color: #4527A0;
}
body {
height: 100vh;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
font-family: 'Roboto', sans-serif;
-webkit-transform: translateZ(0);
transform: translateZ(0);
font-weight: 400;
}
button {
border: none;
background: transparent;
}
.is_current:after {
width: 100%;
}
.is_current {
-webkit-transform: translate3d(0, -5px, 0);
transform: translate3d(0, -5px, 0);
cursor: pointer;
}
.card {
will-change: transform;
margin: 8px;
position: relative;
border-radius: 2px;
overflow: hidden;
background-color: #fafafa;
height: 35%;
width: 344px;
-webkit-transition: all 400ms cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 400ms cubic-bezier(0.165, 0.84, 0.44, 1);
-webkit-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);
}
.card:hover {
cursor: pointer;
}
.card__image {
position: absolute;
background-size: cover;
background-position: center bottom;
background-repeat: no-repat;
width: 100%;
height: 100%;
overflow: hidden;
display: block;
opacity: 0;
-webkit-transition: all 200ms cubic-bezier(0.075, 0.82, 0.165, 1);
transition: all 200ms cubic-bezier(0.075, 0.82, 0.165, 1);
}
.card__image:after {
content: "";
display: block;
position: absolute;
background-color: rgba(0, 0, 0, 0.1);
top: 0;
left: 0;
right: 0;
-webkit-transition: all 500ms;
transition: all 500ms;
bottom: 0;
}
.card__title {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
font-size: 24px;
color: #FFF;
margin: 0;
position: absolute;
left: 0;
right: 0;
padding: 0 16px;
font-weight: 400;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
-webkit-transition: all 200ms cubic-bezier(0.075, 0.82, 0.165, 1);
transition: all 200ms cubic-bezier(0.075, 0.82, 0.165, 1);
}
.card__subtitle {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
font-size: 14px;
display: block;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
color: #000;
left: 88px;
right: 0;
top: 45px;
position: absolute;
padding: 0 16px;
opacity: 0;
-webkit-transition: all 200ms cubic-bezier(0.075, 0.82, 0.165, 1);
transition: all 200ms cubic-bezier(0.075, 0.82, 0.165, 1);
}
.card__text {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
font-size: 14px;
display: block;
left: 0;
right: 0;
top: 100px;
padding: 16px;
margin: 0;
line-height: 1.6;
position: absolute;
color: #000;
overflow: hidden;
-webkit-transition: width 200ms cubic-bezier(0.075, 0.82, 0.165, 1);
transition: width 200ms cubic-bezier(0.075, 0.82, 0.165, 1);
-webkit-transition: delay 0.1s;
transition: delay 0.1s;
}
.card__action-bar {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
position: absolute;
bottom: 0;
top: auto;
left: 0;
right: 0;
padding: 0 8px;
border-top: 1px solid #E0E0E0;
boz-sizing: border-box;
height: 52px;
-webkit-transition: left 200ms cubic-bezier(0.075, 0.82, 0.165, 1);
transition: left 200ms cubic-bezier(0.075, 0.82, 0.165, 1);
}
.card__button {
outline: none;
position: relative;
display: inline-block;
line-height: 52px;
padding: 0 16px;
color: #FF1744;
}
.card--medium {
-webkit-box-shadow: 0 13px 25px 0 rgba(0, 0, 0, 0.3), 0 11px 7px 0 rgba(0, 0, 0, 0.19);
box-shadow: 0 13px 25px 0 rgba(0, 0, 0, 0.3), 0 11px 7px 0 rgba(0, 0, 0, 0.19);
height: 208px;
min-height: 208px;
}
.card--medium .card__image {
border-radius: 1px 1px 0 0;
left: -100%;
right: 0;
top: 0;
max-height: 0;
opacity: 0;
}
.card--medium .card__title {
color: #FF1744;
top: 16px;
}
.card--medium .card__text {
font-size: 16px;
top: 50px;
}
.card--medium .card__action-bar {
left: 0;
}
.card--small {
-webkit-box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.3), 0 2px 2px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.3), 0 2px 2px 0 rgba(0, 0, 0, 0.2);
height: 136px;
min-height: 136px;
}
.card--small .card__image {
border-radius: 1px 0 0 1px;
left: 0;
top: 0;
width: 88px;
opacity: 1;
max-height: 136px;
}
.card--small .card__image:after {
opacity: 0;
}
.card--small .card__title {
color: #000;
left: 88px;
top: 8px;
}
.card--small .card__subtitle {
opacity: 1;
left: 88px;
}
.card--small .card__text {
top: 30px;
opacity: 0;
}
.card--small .card__action-bar {
left: 88px;
}
.hide {
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Card-->
<div class="card card--small">
<div class="card__image" style="background-image: url(https://placeimg.com/640/480/nature);"></div>
<h2 class="card__title">Nature</h2><span class="card__subtitle">By Unknown</span>
<p class="card__text">Located two hours south of Sydney in the Southern Highland of New South Wales...</p>
<div class="card__action-bar">
<button class="card__button">SHARE</button>
<button class="card__button show-more">LEARN MORE</button>
<button class="card__button show-less hide">SHOW LESS</button>
</div>
</div>
<!-- Card-->
<div class="card card--small">
<div class="card__image" style="background-image: url(https://placeimg.com/640/480/nature);"></div>
<h2 class="card__title">Nature</h2><span class="card__subtitle">By Unknown</span>
<p class="card__text">Located two hours south of Sydney in the Southern Highland of New South Wales...</p>
<div class="card__action-bar">
<button class="card__button">SHARE</button>
<button class="card__button show-more">LEARN MORE</button>
<button class="card__button show-less hide">SHOW LESS</button>
</div>
</div>
答案 0 :(得分:1)
您的问题在于您的选择器,它根本不访问点击目标的父级,而是定位所有具有.card
级别的对象。 See jQuery's .closest()
docs了解更多信息。
(function() {
$(".show-more, .show-less").click(function(e) {
// Get parent based on click target
// $(this) represents the element that was clicked
let $parent = $(this).closest(".card");
$parent
.toggleClass("card--small card--medium")
.find(".show-more, .show-less").toggleClass("hide");
});
})();
&#13;
@import url(https://fonts.googleapis.com/css?family=Roboto:400,700,300);
:root {
-webkit-transition: all 300ms;
transition: all 300ms;
}
:root.bg--medium {
background-color: #E53935;
}
:root.bg--small {
background-color: #4527A0;
}
body {
height: 100vh;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
font-family: 'Roboto', sans-serif;
-webkit-transform: translateZ(0);
transform: translateZ(0);
font-weight: 400;
}
button {
border: none;
background: transparent;
}
.is_current:after {
width: 100%;
}
.is_current {
-webkit-transform: translate3d(0, -5px, 0);
transform: translate3d(0, -5px, 0);
cursor: pointer;
}
.card {
will-change: transform;
margin: 8px;
position: relative;
border-radius: 2px;
overflow: hidden;
background-color: #fafafa;
height: 35%;
width: 344px;
-webkit-transition: all 400ms cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 400ms cubic-bezier(0.165, 0.84, 0.44, 1);
-webkit-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);
}
.card:hover {
cursor: pointer;
}
.card__image {
position: absolute;
background-size: cover;
background-position: center bottom;
background-repeat: no-repat;
width: 100%;
height: 100%;
overflow: hidden;
display: block;
opacity: 0;
-webkit-transition: all 200ms cubic-bezier(0.075, 0.82, 0.165, 1);
transition: all 200ms cubic-bezier(0.075, 0.82, 0.165, 1);
}
.card__image:after {
content: "";
display: block;
position: absolute;
background-color: rgba(0, 0, 0, 0.1);
top: 0;
left: 0;
right: 0;
-webkit-transition: all 500ms;
transition: all 500ms;
bottom: 0;
}
.card__title {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
font-size: 24px;
color: #FFF;
margin: 0;
position: absolute;
left: 0;
right: 0;
padding: 0 16px;
font-weight: 400;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
-webkit-transition: all 200ms cubic-bezier(0.075, 0.82, 0.165, 1);
transition: all 200ms cubic-bezier(0.075, 0.82, 0.165, 1);
}
.card__subtitle {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
font-size: 14px;
display: block;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
color: #000;
left: 88px;
right: 0;
top: 45px;
position: absolute;
padding: 0 16px;
opacity: 0;
-webkit-transition: all 200ms cubic-bezier(0.075, 0.82, 0.165, 1);
transition: all 200ms cubic-bezier(0.075, 0.82, 0.165, 1);
}
.card__text {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
font-size: 14px;
display: block;
left: 0;
right: 0;
top: 100px;
padding: 16px;
margin: 0;
line-height: 1.6;
position: absolute;
color: #000;
overflow: hidden;
-webkit-transition: width 200ms cubic-bezier(0.075, 0.82, 0.165, 1);
transition: width 200ms cubic-bezier(0.075, 0.82, 0.165, 1);
-webkit-transition: delay 0.1s;
transition: delay 0.1s;
}
.card__action-bar {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
position: absolute;
bottom: 0;
top: auto;
left: 0;
right: 0;
padding: 0 8px;
border-top: 1px solid #E0E0E0;
boz-sizing: border-box;
height: 52px;
-webkit-transition: left 200ms cubic-bezier(0.075, 0.82, 0.165, 1);
transition: left 200ms cubic-bezier(0.075, 0.82, 0.165, 1);
}
.card__button {
outline: none;
position: relative;
display: inline-block;
line-height: 52px;
padding: 0 16px;
color: #FF1744;
}
.card--medium {
-webkit-box-shadow: 0 13px 25px 0 rgba(0, 0, 0, 0.3), 0 11px 7px 0 rgba(0, 0, 0, 0.19);
box-shadow: 0 13px 25px 0 rgba(0, 0, 0, 0.3), 0 11px 7px 0 rgba(0, 0, 0, 0.19);
height: 208px;
min-height: 208px;
}
.card--medium .card__image {
border-radius: 1px 1px 0 0;
left: -100%;
right: 0;
top: 0;
max-height: 0;
opacity: 0;
}
.card--medium .card__title {
color: #FF1744;
top: 16px;
}
.card--medium .card__text {
font-size: 16px;
top: 50px;
}
.card--medium .card__action-bar {
left: 0;
}
.card--small {
-webkit-box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.3), 0 2px 2px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.3), 0 2px 2px 0 rgba(0, 0, 0, 0.2);
height: 136px;
min-height: 136px;
}
.card--small .card__image {
border-radius: 1px 0 0 1px;
left: 0;
top: 0;
width: 88px;
opacity: 1;
max-height: 136px;
}
.card--small .card__image:after {
opacity: 0;
}
.card--small .card__title {
color: #000;
left: 88px;
top: 8px;
}
.card--small .card__subtitle {
opacity: 1;
left: 88px;
}
.card--small .card__text {
top: 30px;
opacity: 0;
}
.card--small .card__action-bar {
left: 88px;
}
.hide {
display: none
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Card-->
<div class="card card--small">
<div class="card__image" style="background-image: url(https://placeimg.com/640/480/nature);"></div>
<h2 class="card__title">Nature</h2><span class="card__subtitle">By Unknown</span>
<p class="card__text">Located two hours south of Sydney in the Southern Highland of New South Wales...</p>
<div class="card__action-bar">
<button class="card__button">SHARE</button>
<button class="card__button show-more">LEARN MORE</button>
<button class="card__button show-less hide">SHOW LESS</button>
</div>
</div>
<!-- Card-->
<div class="card card--small">
<div class="card__image" style="background-image: url(https://placeimg.com/640/480/nature);"></div>
<h2 class="card__title">Nature</h2><span class="card__subtitle">By Unknown</span>
<p class="card__text">Located two hours south of Sydney in the Southern Highland of New South Wales...</p>
<div class="card__action-bar">
<button class="card__button">SHARE</button>
<button class="card__button show-more">LEARN MORE</button>
<button class="card__button show-less hide">SHOW LESS</button>
</div>
</div>
&#13;