点击链接上显示的div数据和链接消失不工作

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

我试图代码

<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之前，那么数据不会在扬声器类div上显示。
任何建议是最受欢迎的。

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

来源

2014-12-04 user2818060

你怎么能隐藏父并显示孩子呢??这没有任何意义：/ – 2014-12-04 08:15:12

由于DIV是锚内，股利也将是hidd如果你隐藏锚点。您需要将该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>

$('#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/

编辑

如果你想用下面的CSS

.dis-non 
{ 
    display: none; 
}

这里换另一分区内speakers股利如下

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

是应该显示speakers股利和隐藏点击的锚JS

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

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

EDIT 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/

来源

2014-12-04 08:24:48 ekad

完美的答案，我在js小提琴搜索 – user2818060 2014-12-04 08:31:45

当你添加extar div类

然后下一个功能是不能够显示隐藏div – user2818060 2014-12-04 10:36:24

看到js小提琴：http ：//jsfiddle.net/fw3sgc21/4/更新问题 – user2818060 2014-12-04 10:37:54

尝试以下操作：

$('.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>

来源

2014-12-04 08:13:30 Mivaweb

链接disapper，但你可以检查然后在div中的数据也应该disapear，我希望数据应该是可见的点击链接后，并希望链接应该消失 – user2818060 2014-12-04 08:17:42

为什么你把这个内部超链接'a '标签？拉动div后超链接 – Mivaweb 2014-12-04 08:19:19

dis-non与显示无相同使用skell js – user2818060 2014-12-04 08:24:06

试试这个

HTML

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

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

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


      });

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

来源

2014-12-04 08:21:30

dis-non是相同的显示none – user2818060 2014-12-04 08:23:42

罚款了吗？你还没有发布你的css代码，那么我怎么能知道 – 2014-12-04 08:25:11

首先你的代码中的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(); 
});

来源

2014-12-04 08:25:27 saNs

点击链接上显示的div数据和链接消失不工作

回答

相关问题