隠しdivを別のdivの中に追加し、jqueryを使って表示する方法

Question

divがあり、その中には隠れているリストがあります。今私はそのdivを追加し、それをクリックすると<th>のテーブルの中に表示しようとしています。

<ul>はdiv内にあり、JQUERY html（）とappend（）は<th>の中に<ul>を追加していますが、まだ隠れています。どのように私はそれをクリックしただけで見ることができます<th>と複数回追加していない1回表示します。

これまで私がこれまで行ってきたことがあります。

/* 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); 
 
    }); 
 
});

.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 1

ただ、ここでは、Oのためにはい、あなたのための実施例である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を書くことができる望むように表示するutput。

/* 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"); 
 
    }); 
 
});

.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>