javascript - 检查列表元素是否具有类时需要单击两次

Question

制作了一个基本列表，其中包含单击元素的选项，然后它将显示下一个 ul。

这行得通，但是当已经显示一个列表时，如果您尝试单击另一个标题，您需要单击该标题两次才能显示相关的 ul。

一个例子是这个 fiddle :http://jsfiddle.net/yu8ac6g7/

默认情况下，额外的列表是隐藏的。复制我的问题:

• 单击第一个元素以显示下一个 ul
• 然后单击第二个，隐藏第一个 ul 而显示第二个。

现在，如果您尝试单击第一项，则什么也不会发生。在 jQuery 操作发生之前，您必须再次单击该元素。在您重新加载页面之前，这将是相同的。

对我正在尝试的事情有任何帮助/更好的方法吗？

备份代码:

$(".expanding_mobile_tab").on('click', function () {
    if ($(this).hasClass('mobile_tab_closed')) {
        $(this).removeClass('mobile_tab_closed').addClass('mobile_tab_open');
        $(".features_mobile_details_tab").hide();
        $(this).next('ul').fadeToggle();
        $('html,body').animate({
            scrollTop: $(".mobile_detail_tabs").offset().top
        }, 800);
    } else {
        $(this).removeClass('mobile_tab_open').addClass('mobile_tab_closed');
        $(this).next('ul').fadeOut();
        console.log('close');
    }
});

<div class="mobile_detail_tabs count_detail_tabs_1 only_mobile">
<ul>
    <li class="expanding_mobile_tab mobile_tab_closed"><a class="mobile_smoothscroll">Features <i class="fa fa-plus-circle"></i></a>
    </li>
    <ul class="features_mobile_details_tab">
        <li><span>Registration</span>  <b>FFF FFFF</b> 
        </li>
        <li><span>Colour</span>  <b>Black</b> 
        </li>
        <li><span>Year</span>  <b>2013</b> 
        </li>
        <li><span>Fuel Type</span>  <b>Diesel</b> 
        </li>
        <li><span>Mileage</span>  <b>16336</b> 
        </li>
        <li><span>Combined MPG</span>  <b>62.80</b> 
        </li>
        <li><span>Transmission</span>  <b>Automatic</b> 
        </li>
        <li><span>Tax Band</span>  <b>C</b> 
        </li>
        <li><span>Engine Size (cc)</span>  <b>1,995</b> 
        </li>
        <li><span>CO2 (g/km)</span>  <b>118</b> 
        </li>
        <li><span>Body Style</span>  <b>2</b> 
        </li>
        <li><span>4 Wheel Drive</span>  <b>No</b> 
        </li>
    </ul>
    <li class='expanding_mobile_tab mobile_tab_closed'><a class='mobile_smoothscroll'>Spec Check <i class='fa fa-plus-circle'></i></a>
    </li>
    <ul class='features_mobile_details_tab'>
        <li class='HPI_spec_list_item'>Armrest front, sliding : £140</li>
        <li class='HPI_spec_list_item'>Automatic transmission : £1550</li>
        <li class='HPI_spec_list_item'>Centre armrest for rear seats : £75</li>
        <li class='HPI_spec_list_item'>Enhanced Bluetooth telephone preparation with USB audio interface and Voice Control : £430</li>
        <li class='HPI_spec_list_item'>Exterior mirrors - folding, auto dimming : £300</li>
        <li class='HPI_spec_list_item'>Media package - BMW Business : £990</li>
        <li class='HPI_spec_list_item'>Metallic paint : £645</li>
        <li class='HPI_spec_list_item'>Seat heating for driver and front passenger : £325</li>
        <li class='HPI_spec_list_item'>Sun protection glass : £265</li>
    </ul>
</ul>

Answer 1

您可以简单地按照以下方式进行操作:

$(".expanding_mobile_tab").on('click', function () {
    $('.expanding_mobile_tab').toggleClass('mobile_tab_closed')
                              .toggleClass('.mobile_tab_open');
    $(".features_mobile_details_tab").not($(this).next()).hide();
    $(this).next('ul').fadeToggle();
    $('html,body').animate({
        scrollTop: $(".mobile_detail_tabs").offset().top
    }, 800);
});

Updated Fiddle