jQuery先切換文本隱藏文本

Question

我已經爲我的問題尋找解決方案，可以找到一些方法，但是，沒有一個按預期工作。所以，這是我嘗試瞭解jQuery切換功能。我希望你可以幫助我！

1. 問題：我想隱藏文本並在點擊按鈕/鏈接後使其可見。
2. 解決方案：切換功能。不幸的是，這會首先顯示文本並在點擊按鈕/鏈接後隱藏它。代碼：所以，我從一個較舊的帖子中找到了這段代碼（對不起，我找不到作者，如果是你的話 - 請給我發短信，我會正確地評價你）。

腳本：

function toggle_visibility(id) { 
    var e = document.getElementById(id); 
    e.style.display = ((e.style.display!='none') ? 'none' : 'block'); 
} 

document.getElementById('showDiv').onclick=function(){ 
    // Remove any element-specific value, falling back to stylesheets 
    document.getElementById('element').style.display=''; 
}; 

在我的HTML身體部分我用下面的代碼：描述

<a onclick="toggle_visibility('private');"> 
    <b>» Private Enquity/Venture Capital</b> 
</a> 
<div id="private"> 
    <p>In arcu accumsan arcu adipiscing accumsan orci ac. Felis id enim aliquet. Accumsan ac integer lobortis commodo ornare aliquet accumsan erat tempus amet porttitor. Ante commodo blandit adipiscing integer semper orci eget. Faucibus commodo adipiscing mi eu nullam accumsan morbi arcu ornare odio mi adipiscing nascetur lacus ac interdum morbi accumsan vis mi accumsan ac praesent.</p> 
</div> 

的切換功能的工作原理，但我怎樣才能使內部隱藏的文本，直到鏈接是點擊？ 我對此很感興趣，並感謝您的幫助。

謝謝！

Answer 1

要使元素隱藏默認情況下使用CSS：display: none。您也可以用一個不顯眼的事件處理程序代碼的工作（這是優於過時on*事件屬性）和jQuery的toggle()方法，像這樣：

$(function() { 
 
    $('.toggle').click(function(e) { 
 
    e.preventDefault(); 
 
    $(this).next('.private').toggle(); 
 
    }); 
 
});

.private { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="#" class="toggle"><b>» Private Enquity/Venture Capital</b></a> 
 
<div class="private"> 
 
    <p>In arcu accumsan arcu adipiscing accumsan orci ac. Felis id enim aliquet. Accumsan ac integer lobortis commodo ornare aliquet accumsan erat tempus amet porttitor. Ante commodo blandit adipiscing integer semper orci eget. Faucibus commodo adipiscing mi eu nullam accumsan morbi arcu ornare odio mi adipiscing nascetur lacus ac interdum morbi accumsan vis mi accumsan ac praesent.</p> 
 
</div>

注意，我改變了id到class，因爲這種機制經常在整個頁面上重複，這將導致重複id屬性，這是無效的HTML。

Answer 2

希望得到這個幫助！

function toggle_visibility(id) { 
 
    var e = document.getElementById(id); 
 
    //e.style.display = ((e.style.display!='none') ? 'none' : 'block'); 
 
    } 
 
       
 
    document.getElementById('showDiv').onclick=function(){ 
 
     // Remove any element-specific value, falling back to stylesheets 
 
     $('#element').toggleClass('display'); 
 
     // $('#element2').toggleClass('display'); 
 
    };

.display { 
 
display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<a href="#" onclick="toggle_visibility('private');"> 
 
     <b id="showDiv">» Private Enquity/Venture Capital</b> 
 
</a> 
 

 
<p id="element" class="display">In arcu accumsan arcu adipiscing accumsan orci ac. Felis id enim aliquet. Accumsan ac integer lobortis commodo ornare aliquet accumsan erat tempus amet porttitor. Ante commodo blandit adipiscing integer semper orci eget. Faucibus commodo adipiscing mi eu nullam accumsan morbi arcu ornare odio mi adipiscing nascetur lacus ac interdum morbi accumsan vis mi accumsan ac praesent.</p>

Answer 3

$(document).ready(function(){ 
 
$("a").click(function(){ 
 
$("#private").toggle(); 
 
}); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="#"> 
 
    <b>» Private Enquity/Venture Capital</b> 
 
</a> 
 
<div id="private"> 
 
    <p>In arcu accumsan arcu adipiscing accumsan orci ac. Felis id enim aliquet. Accumsan ac integer lobortis commodo ornare aliquet accumsan erat tempus amet porttitor. Ante commodo blandit adipiscing integer semper orci eget. Faucibus commodo adipiscing mi eu nullam accumsan morbi arcu ornare odio mi adipiscing nascetur lacus ac interdum morbi accumsan vis mi accumsan ac praesent.</p> 
 
</div>