Question

我已经在我的html页面上创建了几个标题div并且我想在标题div的点击下方附加一个div，但我还想确保如果div是一次只添加一个div附加在其单击的第一个标题上，然后单击第二个标题，它应该被删除。我已经尝试切换功能并附加功能，但没有得到我想要的，请建议

这是我的代码

<div class="list-group">
    <div class="list-group-item" id="item1">
        <div class="checkbox"><label><input type="checkbox"></label></div>
        <i class="fa fa-folder-open-o folder"></i>
        <span class="name" >Introduction Document </span>
        <span class="left-more-icon"></span> 
    </div>
    <div class="list-group-item" id="item2">
        <div class="checkbox"><label><input type="checkbox"></label></div>
        <i class="fa fa-folder-open-o folder"></i>
        <span class="name" >Platform details document</span> 
        <span class="right-more-icon"></span> 

    </div>
    <div class="list-group-item" id="item3">
        <div class="checkbox"><label><input type="checkbox"></label></div>
        <i class="fa fa-file-word-o word"></i>
        <span class="name" >Station list.docx</span> 
        <span class="text-muted">Jul 21, 2015  |  25 KB</span>
        <span class="right-more-icon"></span> 
    </div>
    <div class="list-group-item" >
        <div class="checkbox"><label><input type="checkbox"></label></div>
        <i class="fa  fa-file-pdf-o pdf-icon"></i>
        <span class="name" >Platform details document</span> 
        <span class="text-muted">Jul 21, 2015  |  25 KB</span>
        <span class="right-more-icon"></span> 
    </div>
</div>

这是我的js功能，现在点击它就是将div添加到所有标题div

<script type="text/javascript">
    $(document).ready(function () {
        $('.action-div-cont').hide();
        $('.list-group-item').click(function () {
            if ($('.action-div-cont').length == 0) {
                $(".list-group-item").after('<div class="action-div-cont"> <ul> <li><a href="" data-toggle="modal" data-target=".bs-example-modal-lg"><i class="fa fa-user"></i> Share </a></li> <li><a href=""><i class="fa fa-times"></i>Delete </a></li> <li><a href=""><i class="fa fa-files-o"></i>Move/Copy </a></li> <li><a href=""><i class="fa fa-font"></i>Rename </a></li> <li><a href="">More... </a></li> </ul> <div class="clearfix"></div> </div>');
            }
        });
    });
</script>

Answer 1

您有一个通用且具体的案例，并且您使用通用代替特定案例。

将您的JavaScript更改为：

$(document).ready(function(){
  $('.action-div-cont').hide();
  $('.list-group-item').click(function() {
    if($('.action-div-cont').length==0) {
      // You should use this in order to get the current element.
      // this here means the current list-group-item that has been clicked.
      $(this).after('<div class="action-div-cont"> <ul> <li><a href="" data-toggle="modal" data-target=".bs-example-modal-lg"><i class="fa fa-user"></i> Share </a></li> <li><a href=""><i class="fa fa-times"></i>Delete </a></li> <li><a href=""><i class="fa fa-files-o"></i>Move/Copy </a></li> <li><a href=""><i class="fa fa-font"></i>Rename </a></li> <li><a href="">More... </a></li> </ul> <div class="clearfix"></div> </div>');
    }
  });
});

有关详细信息，请参阅代码中的注释。

如何在另一个div下面附加div并检查附加的div是否已经存在？

2 个答案: