Question

我已经为我的问题搜索了一个解决方案，并且可以找到一些方法，但是，它们都没有按预期工作。所以，这是我尝试理解jQuery切换功能。我希望你能帮助我！

问题：我想隐藏文字，点击按钮/链接后可以看到它。
解决方案：切换功能。不幸的是，这会首先显示文本并在单击按钮/链接后隐藏它。
代码：所以，我在堆栈上找到了这个旧帖子的代码（对不起，我找不到作者，如果是你的话 - 请发短信给我，我会相信你。）

剧本：

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>

jQuery切换首先隐藏文本

3 个答案: