Question

这是我的jsfiddle

在上面的jsfiddle中，一旦你点击Current Orders，它就会显示代表Orders的行。当点击该特定订单链接时，将显示与该行相关的数据，我面临的问题是标题（行）正在消失

有人可以帮我解决这个问题吗

<div  class="currentOrdersWrapper">
        <a id="co_btn" class="currentOrdLink">Current Orders</a>
        <ul id="co_ul" class="currentOrdersUl" style="display:block">

        </ul>
    </div>


$(document).on('click', '#co_btn', function (event) {
    $("#co_ul").empty();
    var html = '<div id="co_row123" id_data="123" class="currentOrderRow">\
         <aside><b>Order No : </b>123</aside>\
         <aside><b>Vendor Name: </b>First Vendor</aside>\
      </div>\
   <div id="codetails123"  class="currentOrderDetailsWrap" style="height: 100px; display: none; background: rgba(255, 255, 255, 0.0980392);">\
   </div>';
    $("<li>" + html + "</li>").appendTo("#co_ul");

    var html2 = '<div id="co_row223" id_data="223" class="currentOrderRow">\
         <aside><b>Order No : </b>223</aside>\
         <aside><b>Vendor Name: </b>Second Vendor</aside>\
      </div>\
   <div id="codetails223"  class="currentOrderDetailsWrap" style="height: 100px; display: none; background: rgba(255, 255, 255, 0.0980392);">\
   </div>';

    $("<li>" + html2 + "</li>").appendTo("#co_ul");

    $("#co_ul").slideToggle();

});

$(document).on('click', '.currentOrderRow', function (event) {
    var orderid = $(this).attr("id_data");
    $("#co_row" + orderid).empty();
    if(orderid=='123')
    {
        var htmldiv = '<div class="order-listdetails-wrap"\
        <div class="orderTitle">FirstItem\
        </div>\
        </div>';
    }
    else if(orderid=='223')
    {
        var htmldiv = '<div class="order-listdetails-wrap"\
        <div class="orderTitle">SecondItem\
        </div>\
        </div>';
    }
    $("#co_row" + orderid).append(htmldiv);
});

Answer 1

只需从display：block更改为display：none，它就可以工作:) http://jsfiddle.net/bL1gdxth/3/

<div class="currentOrdersWrapper">  <a id="co_btn" class="currentOrdLink">Current Orders</a>

    <ul id="co_ul" class="currentOrdersUl" style="display:none;"></ul>
</div>

Answer 2

因为您在点击处理程序中调用$("#co_row" + orderid).empty(); ...

你应该做的是，如果该项目存在，不要做任何像

这样的事情

$(document).on('click', '.currentOrderRow', function (event) {
    var orderid = $(this).attr("id_data");
    if($("#co_row" + orderid).find('.order-listdetails-wrap').length){
        return;
    };
    if(orderid=='123')
    {
        var htmldiv = '<div class="order-listdetails-wrap"\
<div class="orderTitle">FirstItem\
</div>\
</div>';
    }
    else if(orderid=='223')
    {
        var htmldiv = '<div class="order-listdetails-wrap"\
<div class="orderTitle">SecondItem\
</div>\
</div>';
    }
    $("#co_row" + orderid).append(htmldiv);
});

演示：Fiddle

将li标签添加到ul标签时，标题会消失吗？

2 个答案: