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

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

那是因为点击的元素没有在if条件中使用的必需的class。您可以检查下一个 ul 元素的可见性以做出 show/hide 决定：

$(".expanding_mobile_tab").on('click', function () {
 if (! $(this).next('ul').is(':visible')) {
    $(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');
}});

Working Demo

Answer 2

试试这个

Fiddle

$(".expanding_mobile_tab").on('click', function () {
    if ($(this).hasClass('mobile_tab_closed')) {
        $(".mobile_tab_open").removeClass('mobile_tab_open').addClass('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');
    }
});

Answer 3

您可以简单地按照以下步骤操作：

$(".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

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

List element needs to be clicked twice when checking if it has a class

javascript

jquery

html

css

list