javascript - 单击链接以在 div 上显示数据，链接消失不起作用

Question

我需要什么

• 我需要在用户点击链接时显示数据。
• 点击后链接消失。

我试过代码

<a href="javascript:void(0);" class="viewdetail more" 
    style="color:#8989D3!important;">view details
    <div class="speakers dis-non">
    </div>
</a>

jquery代码

$('.viewdetail').click(function() {
    $(this).find('.speakers').show();
    $(this).find('.viewdetail').hide();
});

问题

• 当我点击查看详情链接时，数据显示在 div 上。

• 链接不会消失。

• 如果我将 anchor 放在 div 之前，则数据不会显示在扬声器类 div 上。

• 欢迎提出任何建议。

jsfiddle:http://jsfiddle.net/fw3sgc21/

Answer 1

由于div在anchor里面，如果隐藏anchor，div也会被隐藏。您需要将 div 放在 anchor 旁边才能使其工作。使用 next()选择 div 的方法。

HTML

<a href="javascript:void(0);" id="viewdetail" style="color:green">view detail</a>
<div class="speakers dis-non" style="display: none">
    test data to be shown
</div>

JS

$('#viewdetail').on('click', function(){
    // show div with speakers class next to the anchor
    $(this).next('div.speakers').show(); 

    // hide the anchor
    $(this).hide();
});

JSFiddle:http://jsfiddle.net/fw3sgc21/2/

编辑

如果你想包装speakers div 在另一个 div 中，如下所示

<a href="javascript:void(0);" id="viewdetail" style="color:green">view detail</a>
<div class="12u">
    <div class="speakers dis-non">
        test data to be shown
    </div>
</div>

使用以下 CSS

.dis-non
{
    display: none;
}

这是应该显示 speakers 的 JS div 并隐藏点击的 anchor

$('#viewdetail').on('click', function(){
    $(this).next().children('div.speakers').show();
    $(this).hide();
});

JSFiddle:http://jsfiddle.net/fw3sgc21/6/

编辑 2

如果你想把 anchor 放在两个 div 中，如下所示

<div class="a">
    <div class="b">
        <a href="javascript:void(0);" id="viewdetail" style="color:green">view detail</a>
    </div>
</div>
<div class="12u">
    <div class="speakers dis-non">
        test data to be shown
    </div>
</div>

使用.parent()两次选择 <div class="a"> 的方法, 然后使用 .next().children('div.speakers').show()显示speakers格

$('#viewdetail').on('click', function(){
    $(this).parent().parent().next().children('div.speakers').show();
    $(this).hide();
});

JSFiddle:http://jsfiddle.net/fw3sgc21/8/