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/