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

あなたは

<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> 

としてあなたのhtmlを更新し、スクリプト

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/