slideToggleとaddClassを同時に使用する

Question

タイトルをクリックすると、説明が表示されます。私は、最高の解決策が何であるかわからないという問題にぶつかっています。私はjqueryのslideToggleメソッドを使用して、説明が表示されているかのように見せかけるか、パネルが開いているかのように見せたい...視差を考える。また、テキストをフェードインしたいので、のアプローチをopacityで使用しました。

私の問題は、メソッドが1つずつ実行されるため、イベントが同時に実行されないということです。私は純粋なCSSのアプローチでこれと同じ効果を得る方法がわかりません。

誰もが考えている？

$(".service-list-wrap").on("click", function(event) { 
 
\t \t var $target = $(this).find('.service-list-description').toggleClass('active').slideToggle(700); 
 
\t \t $('.service-list-description').not($target).fadeOut(300).removeClass('active'); 
 
\t });

.service-list-title { 
 
    display: block; 
 
    color: #333333; 
 
    font-size: 1.1rem; 
 
    letter-spacing: .1rem; 
 
    margin: 20px 0px; 
 
    padding: 0 10px 0 25px; 
 
    cursor: pointer; 
 
    transition: all .35s ease; 
 
    -webkit-transition: all .35s ease; 
 
} 
 

 
.service-list-description { 
 
    display: none; 
 
    color: #333333; 
 
    font-size: .9rem; 
 
    margin: 10px 0; 
 
\t opacity: 0; 
 
\t transition: all .35s ease;-webkit-transition: all .35s ease; 
 
} 
 
.service-list-description.active { 
 
\t opacity: 1; 
 
\t transition: all .5s ease;-webkit-transition: all .5s ease; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="service-list-wrap"> 
 
    <li class="service-list-title">A</li> 
 
    <p class="service-list-description">This is the content for A</p> 
 
</div> 
 
<div class="service-list-wrap"> 
 
    <li class="service-list-title">B</li> 
 
    <p class="service-list-description">This is the content for B</p> 
 
</div> 
 
<div class="service-list-wrap"> 
 
    <li class="service-list-title">C</li> 
 
    <p class="service-list-description">This is the content for C</p> 
 
</div>

Answer 1

この解決策はあなたに役立ちます - https://jsfiddle.net/nxj6egfz/2/。 slideToggleとanimateが使用されます。

$(".service-list-title").on("click", function(event) { 
    var $target = $(this).next('.service-list-description'); 
    $target.toggleClass('active', true).slideToggle(700).find('span').animate({opacity: 1}, 3000); 
    $('.service-list-description').not($target).slideUp(700).find('span').css({opacity: 0}).removeClass('active'); 
}); 

// HTML 
<div class="service-list-wrap"> 
    <li class="service-list-title">A</li> 
    <p class="service-list-description"><span>This is the content for 
    A</span></p> 
</div> 
<div class="service-list-wrap"> 
    <li class="service-list-title">B</li> 
    <p class="service-list-description"><span>This is the content for 
    B</span></p> 
</div> 
<div class="service-list-wrap"> 
    <li class="service-list-title">C</li> 
    <p class="service-list-description"><span>This is the content for 
    C</span></p> 
</div> 

// CSS 
.service-list-title { 
    display: block; 
    color: #333333; 
    font-size: 1.1rem; 
    letter-spacing: .1rem; 
    margin: 20px 0px; 
    padding: 0 10px 0 25px; 
    cursor: pointer; 
} 

.service-list-description { 
    display: none; 
    color: #333333; 
    font-size: .9rem; 
margin: 10px 0; 

} 
span{ 
    opacity: 0; 
} 

Answer 2

$("li.service-list-title").on("click", function(event) { 
    var $target = $(this).siblings('.service-list-description').toggleClass('active'); 
}); 

.service-list-description { 
height:0px; 
opacity:0; 
transition: opacity .5s ease-in-out, height 0.1s; 
} 

.service-list-description.active { 
opacity:1; 
height: auto; 
} 

<div class="service-list-wrap"> 
    <li class="service-list-title">A</li> 
    <p class="service-list-description">This is the content for A</p> 
</div> 
<div class="service-list-wrap"> 
    <li class="service-list-title">B</li> 
    <p class="service-list-description">This is the content for B</p> 
</div> 
<div class="service-list-wrap"> 
    <li class="service-list-title">C</li> 
    <p class="service-list-description">This is the content for C</p> 
</div> 

高さを使用する例：自動 フィドル：https://jsfiddle.net/beekvang/d1g2csqx/5/

Answer 3

だから、基本的に、あなたのhtmlコードは、ビューのセマンティックポイントによって完全に正しくありません。あなたは、 "div"要素の子として "li"要素を持っています。あなたはあなたの "li"要素の親として "ul"または "ol"要素を持つべきです。

この可能な解決策があなたに役立つことを願っています。

https://jsfiddle.net/pablodarde/jkrchwnj/

HTML

<ul class='list'> 
    <li> 
    <div class="box" id="A"> 
     <div class="title">A</div> 
     <p>This is the content for A</p> 
    </div> 
    </li> 
    <li> 
    <div class="box" id="B"> 
     <div class="title">B</div> 
     <p>This is the content for B</p> 
    </div> 
    </li> 
    <li> 
    <div class="box" id="C"> 
     <div class="title">C</div> 
     <p>This is the content for C</p> 
    </div> 
    </li> 
</ul> 

CSS

ul { 
    margin: 0; 
    padding: 0; 
} 

ul li { 
    list-style-type: none; 
} 

.box { 
    max-height: 20px; 
    border-bottom: 1px solid black; 
    overflow: hidden; 
    transition: all 0.5s; 
} 

.box p { 
    opacity: 0; 
    transition: all 0.8s; 
} 

.open { 
    max-height: 100px; 
} 

.box .show { 
    opacity: 1; 
} 

jQueryの

const list = document.getElementsByClassName('list')[0]; 



$('.list li').each(function(idx, li) { 
    $(li).find('.title').on('click', function() { 
    close($('.list')); 
    $(this).parent().addClass('open'); 
    $(this).parent().find('p').addClass('show'); 
    }); 
}); 

function close(_list) { 
    _list.each(function(idx, item) { 
    $(item).find('.box').removeClass('open'); 
    $(item).parent().find('p').removeClass('show'); 
    }); 
}