如何使这个jquery多次切换

Question

$(".read-more-toggle").on("click", function () {
    $('.read-more-content').slideToggle( "slow" );
    $(".read-more-toggle").toggleClass("active");
});

现在，如果我使用相同的css类进行2次切换，则两者将同时打开。

如何使其可用于多次切换。 提前谢谢。

<ul>
<li><a href="#">TItle A</a></li>
<li><a href="#">TItle B</a></li>

<li class="read-more-toggle">TItle Above  <!-- CLOSING LI at bottom -->
<ul class="read-more-content hide">
   <li class="openhead">subtitle</li>
   <li><a href="https://#a">a</a></li>
   <li><a href="https://#b">b</a></li>
   <li class="openhead">subtitle</li>
   <li><a href="https://#c">c</a></li>
   <li class="openhead">subtitle</li>
   <li><a href="https://#d">d</a></li>
</ul><!-- END UL/read-more-content -->
</li><!-- END CLOSING main LI-->

<li><a href="#">TItle C</a></li>

<li class="read-more-toggle">Title Bottom<!-- li closing at bottom -->
<ul class="read-more-content hide">
   <li><a href="#">test</a></li>
   <li>body2</li>
   <li>body3</li>
</ul>
</li><!-- end Title Bottom -->

</ul>

它是CSS .hide{display:none;}