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>