Question

我使用Jquery

获取此HTML

<html>
  <head>
  <script type="text/javascript" src="js/accordian/jquery-1.9.1.js">
  </script>
  <script type="text/javascript">


$(document).on("click", ".checkboxclas", function(e) {
   $(".Topping-details").hide();
  var divdata = $("div.activateUiHTML").html();
   $("#ordersdiv").prepend(divdata);
  });


 </script>
</head>

<body>
   <div  class="activateUiHTML"  data-role="collapsible">
   <div class="prd-items-detials">
      <form><input type="checkbox" class="checkboxclas" name="checkbox-mini-0" id="59" > 
         <label class="testtt" for="checkbox-mini-0">Ice Cream Butter Scotch</label> 
      </form>
      <div class="Topping-details" id="59">
         <section id="topping_tsection_59">
            <i id="topping-close"></i>
            <aside>
               <section class="secclass"><a href="#">Honey with Chocolate Sauce  10 ML</a></section>
            </aside>
         </section>
      </div>
   </div>
   </div>
   <div id="ordersdiv"></div>
</body>

</html>

当点击CheckBox时，我有一个监听器，我将数据附加到名为 ordersdiv 的div

我在一个地方被击中。

当我点击复选框时，我想隐藏 Topping-details 类中的html，当它被添加到 ordersdiv 时，它必须 not 在 activateUiHTML div

下关闭

现在，当我使用$(".Topping-details").hide();时，它正隐藏在div中。

任何人都可以帮我解决这个问题吗？

Answer 1

<强> Working Demo

您需要使用其他选择器隐藏.Topping-details

中的#ordersdiv

附加html后使用$("#ordersdiv .Topping-details").hide();。

试试这个，

$(document).on("click", ".checkboxclas", function(e) {


    var divdata = $("div.activateUiHTML").html();


    $("#ordersdiv").prepend(divdata);
    $("#ordersdiv .Topping-details").hide();

});

注意：

您的html附加信息正在生成重复的ID复选框。

Answer 2

如果我理解正确，你只想隐藏＆＃34; Topping-details＆＃34; div是＆＃34; ordersdiv＆＃34;的孩子。 div？如果是这样，您只需在选择器中使用这两个：

$("#ordersdiv .Topping-details").hide();

这将仅隐藏具有类＆＃34; Topping-details＆＃34;的元素。只有它们也是＆＃34; ordersdiv＆＃34;的子元素。元件。

如何在一个div中打开相同的HTML部分并在另一个div中关闭

2 个答案: