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。
链接没有消失。
如果我在div之前放置锚点，则数据不会显示在扬声器类div上。
欢迎提出任何建议。

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

Answer 1

由于div位于锚点内，因此如果隐藏锚点，div也会被隐藏。你需要将div放在锚点旁边才能使它工作。使用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; }

这里的JS应该显示speakers div并隐藏点击的锚

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

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

编辑2

如果你想把锚放在两个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 div

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

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

Answer 2

尝试以下方法：

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

$(this)引用.viewdetail，因此您不再需要find

将div拉出超链接

HTML：

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

<div class="speakers dis-non"></div>

Answer 3

试试这个

HTML

<a href="javascript:void(0);" id="viewdetail" style="color:green">view detail

</a>
    <div class="speakers dis-non">
        test
    </div>

JS

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


            });

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

Answer 4

首先，代码中的this引用了点击的链接本身。因此，此行$(this).find('.viewdetail').hide();不起作用，因为链接中没有.viewdetail。它应该是

$('.viewdetail').on('click',function(e) {
        var self = $(this);
        self.find('.speakers').show();
        self.hide();
});

但是，如果您隐藏链接，.speakers也会被隐藏，因为它位于您的链接中。如果您希望它可见，则应将其放在链接

之外

例如：

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

和JS：

$('.viewdetail').on('click',function(e) {
        var self = $(this);
        e.preventDefault(); // prevent link from working the way it should
        self.next('.speakers').show();
        self.hide();
});

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

4 个答案: