如何在另一个div中附加隐藏的div并使用jquery

Question

我有一个div，其中包含一个隐藏的列表。现在我试图附加该div并在单击它时将其显示在表的<th>内。

我已将<ul>置于div内，并通过JQUERY html（）和append（），我将<ul>附加到点击的<th>内，但仍隐藏它。如何才能使其仅在点击的<th>中显示，并且只显示一次，而不是多次附加。

这是我到目前为止所做的。

＆＃13;

＆＃13;

/* Right click on column name */
$(document).ready(function() {
  $("body").on("contextmenu", function() {
    return false;
  });
});

$(document).ready(function() {
  var menu = $(".menu-div").html();
  $(".mytable th").on("contextmenu", function() {
    $(this).append(menu);
    console.log(menu);
  });
});

＆＃13;

.datatable-menu {
  position: absolute;
  background: #fff;
  width: 200px;
  z-index: 2000;
  display: none;
}
.datatable-menu li {
  padding: 10px;
}
.datatable-menu li:hover {
  background: #f0f0f0;
  cursor: pointer;
}
.datatable-menu li a {
  color: #191919;
  font-weight: normal;
}

＆＃13;

<div class="menu-div">
  <ul class="datatable-menu z-depth-1">
    <li><a href="#">Change Datatype</a>
    </li>
    <li><a href="#">Find And Replace</a>
    </li>
    <li><a href="#">Rename Columns</a>
    </li>
    <li><a href="#">Split Columns</a>
    </li>
    <li><a href="#">Join Columns</a>
    </li>
  </ul>
</div>

<table class="mytable">
  <thead>
    <th>click me</th>
  </thead>
</table>

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

＆＃13;

＆＃13;

＆＃13;

Answer 1

只需在追加到th

后添加此内容即可

$(this).find(".datatable-menu").show();

/* Right click on column name */
$(document).ready(function() {
  $("body").on("contextmenu", function() {
    return false;
  });
});

$(document).ready(function() {
  var menu = $(".menu-div").html();
  $(".mytable th").on("contextmenu", function() {
    if($(this).find(".datatable-menu").length == 0){ //to check multiple appending
       $(this).append(menu);
       $(this).find(".datatable-menu").show();
    }
    console.log(menu);
  });
});

.datatable-menu {
  position: absolute;
  background: #fff;
  width: 200px;
  z-index: 2000;
  display: none;
}
.datatable-menu li {
  padding: 10px;
}
.datatable-menu li:hover {
  background: #f0f0f0;
  cursor: pointer;
}
.datatable-menu li a {
  color: #191919;
  font-weight: normal;
}

<div class="menu-div">
  <ul class="datatable-menu z-depth-1">
    <li><a href="#">Change Datatype</a>
    </li>
    <li><a href="#">Find And Replace</a>
    </li>
    <li><a href="#">Rename Columns</a>
    </li>
    <li><a href="#">Split Columns</a>
    </li>
    <li><a href="#">Join Columns</a>
    </li>
  </ul>
</div>

<table class="mytable">
  <thead>
    <th>click me</th>
  </thead>
</table>

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

Answer 2

以下是您的工作示例，是的，输出显示为您可以根据需要编写一些css。

＆＃13;

＆＃13;

/* Right click on column name */
$(document).ready(function() {
  $("body").on("contextmenu", function() {
    return false;
  });
});

$(document).ready(function() {
  var menu = $(".menu-div").html();
   //Change event to 'click' from 'contextmenu'
  $(".mytable th").on("click", function() {
   $(this).append(menu);
   //additional Line in code 
   $('.datatable-menu').css("display", "block");
  });
});

＆＃13;

.datatable-menu {
  position: absolute;
  background: #fff;
  width: 200px;
  z-index: 2000;
  display: none;
}
.datatable-menu li {
  padding: 10px;
}
.datatable-menu li:hover {
  background: #f0f0f0;
  cursor: pointer;
}
.datatable-menu li a {
  color: #191919;
  font-weight: normal;
}

＆＃13;

<div class="menu-div">
  <ul class="datatable-menu z-depth-1">
    <li><a href="#">Change Datatype</a>
    </li>
    <li><a href="#">Find And Replace</a>
    </li>
    <li><a href="#">Rename Columns</a>
    </li>
    <li><a href="#">Split Columns</a>
    </li>
    <li><a href="#">Join Columns</a>
    </li>
  </ul>
</div>

<table class="mytable">
  <thead>
    <th>click me</th>
  </thead>
</table>

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

＆＃13;

＆＃13;

＆＃13;