javascript - 简化两个jquery点击功能

如何将下面的jQuery click事件简化为一个？它实际上是一个下拉列表，就像手风琴一样。单击一个选项卡后，如果另一个选项卡被展开，则会向上滑动。

$('.areazone .title').click(function(){
    $(this).toggleClass('expand').next().slideToggle('2000','easeInOutQuint');
    if($('.amenities .title').next().is(':visible')){
        $('.amenities .title').toggleClass('expand').next().slideToggle('2000','easeInOutQuint');
    }
});

$('.amenities .title').click(function(){
    $(this).toggleClass('expand').next().slideToggle('2000','easeInOutQuint');
    if($('.areazone .title').next().is(':visible')){
        $('.areazone .title').toggleClass('expand').next().slideToggle('2000','easeInOutQuint');
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="areazone">
    <div class="title">Area Zone</div>
    <ul>
        <li><label><input class="area-checkbox" id="robertsonquay" type="checkbox" name="robertsonquay"/>Robertson Quay</label></li>
        <li><label><input class="area-checkbox" id="orchardbelt" type="checkbox" name="orchardbelt">Orchard Belt</label></li>
        <li><label><input class="area-checkbox" id="clarkequay" type="checkbox" name="clarkequay">Clarke Quay</label></li>
        <li><label><input class="area-checkbox" id="cbd" type="checkbox" name="cbd">Central Business District</label></li>
        <li><label><input class="area-checkbox" id="boatquay" type="checkbox" name="boatquay">Boat Quay</label></li>
        <li><label><input class="area-checkbox" id="civicdistrict" type="checkbox" name="civicdistrict">Civic District</label></li>
    </ul>
</div>
<div class="amenities">
    <div class="title">Amenities</div>
    <ul>
        <li><label><input type="checkbox" class="am-checkbox" id="shopping" name="shopping">Shopping Malls</label></li>
        <li><label><input type="checkbox" class="am-checkbox" id="museum" name="museum">Museums &amp; Galleries</label></li>
        <li><label><input type="checkbox" class="am-checkbox" id="work" name="work">Work</label></li>
        <li><label><input type="checkbox" class="am-checkbox" id="education" name="education">Education</label></li>
    </ul>
</div>

最佳答案

尝试这种方式：

$('.title').click(function(){
    $(this).toggleClass('expand').next().slideToggle('2000','easeInOutQuint');
    var cl;
    if($(this).hasClass( "amenities" )){
    cl = ".amenities";
    }
    else{
    cl = ".areazone";
    }
    if($(cl + ' .title').next().is(':visible')){
        $(cl + '.title').toggleClass('expand').next().slideToggle('2000','easeInOutQuint');
    }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="areazone">
    <div class="title">Area Zone</div>
    <ul>
        <li><label><input class="area-checkbox" id="robertsonquay" type="checkbox" name="robertsonquay"/>Robertson Quay</label></li>
        <li><label><input class="area-checkbox" id="orchardbelt" type="checkbox" name="orchardbelt">Orchard Belt</label></li>
        <li><label><input class="area-checkbox" id="clarkequay" type="checkbox" name="clarkequay">Clarke Quay</label></li>
        <li><label><input class="area-checkbox" id="cbd" type="checkbox" name="cbd">Central Business District</label></li>
        <li><label><input class="area-checkbox" id="boatquay" type="checkbox" name="boatquay">Boat Quay</label></li>
        <li><label><input class="area-checkbox" id="civicdistrict" type="checkbox" name="civicdistrict">Civic District</label></li>
    </ul>
</div>
<div class="amenities">
    <div class="title">Amenities</div>
    <ul>
        <li><label><input type="checkbox" class="am-checkbox" id="shopping" name="shopping">Shopping Malls</label></li>
        <li><label><input type="checkbox" class="am-checkbox" id="museum" name="museum">Museums &amp; Galleries</label></li>
        <li><label><input type="checkbox" class="am-checkbox" id="work" name="work">Work</label></li>
        <li><label><input type="checkbox" class="am-checkbox" id="education" name="education">Education</label></li>
    </ul>
</div>

关于javascript - 简化两个jquery点击功能，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42901554/