javascript - 如何防止点击 '#'链接跳转但仍执行其余代码

Question

我正在尝试制作一个可点击的 <td> ，以下面的代码结束:

HTML:

<table class="coolTable">
   <tr>
       <td>      
           <a id='parent1' href='#child1' class="parent">G</a>
           <div id="child1" class="child child-dropdown"></div>
       </td>
   </tr>
   <tr>
       <td>
           <a id='parent2' href='#child2' class="parent">C</a>
           <div id="child2" class="child child-dropdown"></div>
       </td>
   </tr>
</table>

JQUERY:

$(document).ready(function(){
    $(".parent").click(function() {
        $(this).parent(".child").empty();
        var data="<p>A</p><p>B</p>"
        /* Get input value on change */
        var inputVal = $(this).val();
        var resultDropdown = $(this).siblings(".child");
        // Display the returned data in browser
        resultDropdown.html(data);
    });

    $(document).on("click", ".child p", function(){
        $(this).parents(".parent").find('a').val("A");
        $(this).parent(".child").empty();
    });
});

CSS:

a {
    color:white;
    text-decoration:none;
}

.child p {
    margin: 0;
    padding: 5px 8px;
    border: 1px solid #CCCCCC;
    cursor: pointer;
    background : white;
}

.child p:hover {
    background: #f2f2f2;
}

.child-dropdown {
    position: absolute;
    display: none;
    z-index: 9;
    color: red;
}

.child-dropdown:target {
    display: block;
}



table.coolTable td {
    background-color: green;
    color: green;
    margin: 0;
    padding: 5px 8px;
}

table.coolTable td:hover {
    background-color: green;
    color: green;
}

td a {
    display: block;
    width: 100%;
}

https://jsfiddle.net/kakatua/cnej7dfs/

如果我点击 <td>它将执行其余代码并向我显示替换 innerHTML 的选项的 <a> .

但是当我在实际网页上实现它时，当我点击 <td>它会跳转到页面底部(并会显示我的下拉列表)。

我不希望页面在点击 <td> 后跳转

我使用了 preventDefault, a="#/"，是的，它不会跳转，而且，它不会返回我的下拉列表。

有什么办法可以防止这种跳跃但仍然执行我的下拉列表吗？

或者任何人都可以建议我制作可点击的 <td>不使用<a>

谢谢!

Answer 1

更新了您的代码，删除了仅用于表单的方法 val 的使用，通过在链接中添加哈希删除了显示 dropdown 的方法，它被替换为仅添加类active 使 dropdown 可见。 PS 抱歉我的英语不好...

$(document).ready(function(){
  $(".parent").click(function(e) {
    e.preventDefault();
    const $link = $(this);
    const data="<p>A</p><p>B</p>"
    const inputVal = $link.data('selected', '');
    const resultDropdown = $link.siblings(".child");
    
    resultDropdown.html(data).addClass('active');
  });
  $(document).on("click", ".child p", function(){
  	const $selected = $(this);
    const $link = $selected.parents('td').find('.parent');
    
    $link.text($selected.text());
    $link.data('selected', $selected.text());
    $selected.parent(".child").removeClass('active');
    
  });
});

a {
    color:white;
    text-decoration:none;
}

.child p{
    margin: 0;
    padding: 5px 8px;
    border: 1px solid #CCCCCC;
    cursor: pointer;
    background : white;
}
.child p:hover{
    background: #f2f2f2;
}

.child-dropdown{
	position:absolute;
	display:none;
	z-index:9;
	color:red;
}

.child-dropdown.active{
  display:block;
}



table.coolTable td {
    background-color:green;
    color:green;
    margin: 0;
    padding: 5px 8px;
}

table.coolTable td:hover {
    background-color:green;
    color:green;
}

td a {
    display:block;
    width:100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table class="coolTable">
   <tr>
   <td>      
   <a id='parent1' href='#child1' class="parent">G</a>
   <div id="child1" class="child child-dropdown"></div>
   </td>
   </tr>
   <tr>
   <td><a id='parent2' href='#child2' class="parent">C</a>
   <div id="child2" class="child child-dropdown"></div></td>
   </tr>
</table>