Question

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

这样做有效，但是当显示已经显示的列表，并且您尝试单击另一个标题时，您需要在显示相关的ul之前单击该标题两次。

一个例子是这个小提琴：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

这是因为clicked元素没有if条件中使用的必需类。您可以检查下一个ul元素的可见性以进行显示/隐藏决策：

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

您可以按照以下方式执行此操作：

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

Answer 3

试试这个

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');
    }
});

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

3 个答案: