Javascript 在两个html内容之间创建切换（单击）

我有这个：

$(document).on('click','a.show_usr_dtl',function(){
    if(!html_1){var html_1 = $(this).html();}
    var html_2 = get_html_2();//get_html2() brings the content for html_2 through an ajax call, no problem with this
    if(($(this).prop('expansion') == 0) || typeof $(this).prop('expansion') == 'undefined' ){
        $(this).html(html_2);
        $(this).prop('expansion',1);
    } else {
        $(this).html(html_1);
        $(this).prop('expansion',0);
    }
 });

正如我在主题中所说，这段代码应该为a.show_usr_dtl元素创建两个内容之间的切换。当页面加载时，该元素有一些内容，当我单击该元素时，该内容被分配给var html_1，我想切换（即a.show_usr_dtl元素必须有）html_2内容。我使用属性“扩展”作为标志。

---

我不知道我没有得到我想要的。

我解决了它！！！在第二行，我改为：if（typeof html_1='undefined'）{html_1=$（this.html（）；}我不知道var操作符会重置变量。问题：我的最后一句话正确吗？我有另一个与此代码相关的问题，我创建了一个JSFIDLE，您可以在这里查看：我希望我想要达到的目标是明确的。如果您多次单击第二个元素，我将使开关工作。然后，如果单击列表的第一个元素，它将与第二个元素切换，而它将与另一个第一个元素切换。这很复杂，因为它与ajax Calls配合使用。我可能会这样做：