點擊鏈接上顯示的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。

• 鏈接不會消失。

• 如果我把div放在div之前，那麼數據不會在揚聲器類div上顯示。

• 任何建議是最受歡迎的。

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

Answer 1

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

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/

編輯

如果你想用下面的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/

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(); 
});