Onclick UL标题有变化吗？

Question

<li class="main_li">
    <a id="post_youowe" onclick="addremoveclass('youowe')" class="main_menu changetxt2" href='javascript:void(0)'>
        <span class="showme">Your Owe</span>
        <span class="hideme">Outstanding</span>
    </a>
    <ul class="sub_ul">
        <li id="post_housingloan"><a class="sub_inner close_menu" href='javascript:void(0)' onclick="addremoveclass('housingloan')">Home Loans 55</a> </li>
        <li id="post_carloan"><a class="sub_inner close_menu" href='javascript:void(0)' onclick="addremoveclass('carloan')">Car Loans</a></li>
        <li id="post_personalloan"><a class="sub_inner close_menu" href='javascript:void(0)' onclick="addremoveclass('personalloan')">Personal Loans</a> </li>
        <li id="post_creditcards"><a class="sub_inner close_menu" href='javascript:void(0)' onclick="addremoveclass('creditcards')">Credit Cards</a> </li>
    </ul>
</li>

我使用的脚本：

function addremoveclass(id) {
    $("li").removeClass('active');
    $("#post_" + id + "").addClass('active');
    $('.result_col').hide();
    $('#tab' + id + '').fadeIn();
    $('.hideme').hide();
    $('.showme').show();
    var check = $("#post_" + id + "").parent().find(".sub_ul:visible").length;
    if (!check) {
        $("#post_" + id + "").find('.hideme').show();
        $("#post_" + id + "").find('.showme').hide();
    }
}

每当我点击内部标题时，主标题就会从“突出”变为“你欠”。 我希望每当我点击内部标题时，标题应该是“优秀”，当我最小化标题按钮时，只显示“你欠”。

Answer 1

您可以将html更新为

<ul class="result_col">
            <li class="main_li">
                <a onclick="toggle(this, true);" class="main_menu changetxt2" href='javascript:void(0)'>
                    <span class="youowe" style="display:none;">Your Owe</span>
                    <span class="outstanding">Outstanding</span>
                </a>
                <ul class="sub_ul">
                    <li><a class="sub_inner close_menu" href='javascript:void(0)' onclick="toggle(this, false);">Home Loans 55</a> </li>
                    <li><a class="sub_inner close_menu" href='javascript:void(0)' onclick="toggle(this, false);">Car Loans</a></li>
                    <li><a class="sub_inner close_menu" href='javascript:void(0)' onclick="toggle(this, false);">Personal Loans</a> </li>
                    <li><a class="sub_inner close_menu" href='javascript:void(0)' onclick="toggle(this, false);">Credit Cards</a> </li>
                </ul>
            </li>
        </ul> 

并使用下面的脚本

function toggle(element, isParent)
    {
        if (isParent)
        {
            // Set title to you owe.
            $(".youowe").show();
            $(".outstanding").hide();

            // toggle inner UL.
            $(element).next().toggle();
        }
        else
        {
            // remove active class
            $(element).parents(".sub_ul").find("li").removeClass('active');

            // add active class to current element.
            $(element).parent().addClass('active');

            // set title to outstanding.
            $(".youowe").hide();
            $(".outstanding").show();
        }
    }

这样你的选项将打开，标题为“优秀”，当你点击突出显示它将最小化内部选项和标题将是“你欠”。 点击“你欠”它将扩展内部选项，进一步点击内部选项将标题设置为“优秀”。

由于您的问题不完整，请告诉我您是否需要其他内容，我会为您更新脚本。

工作演示： https ： //jsfiddle.net/z07jurfv/3/