Question

我正在尝试通过单击父div将css类（.fadeInScale）添加到子div。

这是HTML结构。在括号中是我需要添加.fadeInScale类的位置。

<div class="container js-team-container">
  <div class="team__item team__link js-team-card-trigger ">
    <div class="team__card js-team-card (.fadeInScale)">
        <div class="team__card--top"></div>
        <div class="team__card-content">
            <p>Sample text</p>
        </div>
    </div>
    <img class="img--circle team__img" src="http://placehold.it/150x150" />
</div>

Codepen http://codepen.io/jfarr07/pen/zGMzYe

Answer 1

$(document).ready(function () {
    $('.js-team-card-trigger').on('click', function (e) {
        $(this).find('.js-team-card').toggleClass('fadeInScale');
    });
});

更新了codepen http://codepen.io/anon/pen/rVQzVV

Answer 2

您是否尝试过$(this).find('.js-team-card').toggleClass('fadeInScale');

$(document).ready(function () {
    $('.js-team-card-trigger').click(function (e) {
        $(this).find('.js-team-card').toggleClass('fadeInScale');
      });
});

*, :after, :before {
    box-sizing: inherit;
}

html {
    height: 100%;
}
.container {
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
}
.team__item {
    cursor: pointer;
    display: inline-block;
    position: relative;
    margin-right: 8%;
}
.team__card {
    box-shadow: 1px 1px 10px 0 rgba(0, 0, 0, .1);
    left: -115px;
    margin: auto;
    width: 350px;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: -25px;
    z-index: 99;
    visibility: hidden;
    border-radius: 12px;
    background-clip: padding-box;
}
.team__card--top {
    position: relative;
    width: 100%;
    height: 150px;
    overflow: hidden;
}
.team__card--top:after {
    content:'';
    position: absolute;
    left: 115px;
    top: 25px;
    border-radius: 100%;
    width: 120px;
    height: 120px;
    box-shadow: 0 0 0 500px #fff
}
.team__card-content {
    background: #fff;
    padding: 30px;
}
.team__img {
    -webkit-animation: none!important;
    animation: none!important;
    max-width: 120px;
}
.img--circle {
    border-radius: 50%;
    background-clip: padding-box;
}
.fadeIn {
    animation-name: fadeIn;
    -webkit-animation-name: fadeIn;
    animation-duration: .75s;
    -webkit-animation-duration: .75s;
    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
    visibility: visible !important
}
@keyframes fadeIn {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}
@-webkit-keyframes fadeIn {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}
.fadeInScale {
    animation-name: fadeInScale;
    -webkit-animation-name: fadeInScale;
    animation-duration: .25s;
    -webkit-animation-duration: .25s;
    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
    visibility: visible !important;
}
@keyframes fadeInScale {
    0% {
        -webkit-transform: scale(.75);
        transform: scale(.75);
        opacity: 0
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }
}
@-webkit-keyframes fadeInScale {
    0% {
        -webkit-transform: scale(.75);
        opacity: 0
    }
    100% {
        -webkit-transform: scale(1);
        opacity: 1
    }
}

.u-cf:after, .u-cf:before, .u-clearfix:after, .u-clearfix:before {
    content: " ";
    display: table
}

.u-cf:after, .u-clearfix:after {
    clear: both
}

.u-display {
    display: inherit !important
}

.u-display--b {
    display: block !important
}

.u-display--ib {
    display: inline-block !important
}

.u-display--n {
    display: none !important
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container js-team-container">
    <div class="team__item team__link js-team-card-trigger ">
        <div class="team__card js-team-card">
            <div class="team__card--top"></div>
            <div class="team__card-content">
                <p>Sean believes that behavioral medicine is at an incredible tipping point of innovation thanks to technology and design. He holds a BS in Neuroscience from Columbia University, was an MD/MBA candidate at Harvard, and formerly worked for Google and.</p>
            </div>
        </div>
        <img class="img--circle team__img" src="http://placehold.it/150x150" />
    </div>

Answer 3

$('.js-team-card-trigger').click(function(){
   $(this).find('.team__card:first-child')
   .addClass('fadeInScale');
})

Answer 4

public void onNavigationDrawerItemSelected(int position, boolean fromSavedInstanceState) {
    ....
    ....
    FragmentTransaction transaction = getFragmentManager().beginTransaction();
    // Replace whatever is in the fragment_container view with this fragment,
    // and add the transaction to the back stack
    transaction.replace(R.id.container, fragment);
    // add transaction to back stack so it can be reversed
    transaction.addToBackStack(null);
    // Commit the transaction
    transaction.commit();
}

jQuery通过单击父

4 个答案: