jQuery 先切换隐藏文本

Question

我已经为我的问题搜索了解决方案并找到了一些方法，但是，none 其中的方法按预期工作。所以，这是我尝试理解 jQuery 切换功能。希望你能帮帮我！

问题：我想隐藏文本并在单击 button/link 后使其可见。
解决方案：切换功能。不幸的是，这首先显示文本并在单击 button/link 后隐藏它。
代码：所以，我在堆栈上找到了旧 post 的代码（抱歉，我找不到作者，如果是你 - 请发短信给我，我会正确地记下你的名字.)

脚本：

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>

切换功能如描述的那样工作，但是我怎样才能隐藏里面的文本直到点击 link？我对此非常陌生，感谢您的帮助。

谢谢！

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>

jQuery 先切换隐藏文本

jQuery toggle hide text first

html

javascript

jquery

toggle

show-hide