Question

我在页面中有一个问题，我希望用户能够在答案揭晓之前进行回答。所以他们有两个选择。一个链接显示一些线索和想法，一个链接显示完成的结论。首先，我尝试将原始属性设置为不显示该部分，然后使用.show（）显示该部分，但这不起作用。然后我有一些已经工作的代码具有类似的目的，所以尝试使用.addClass方法。那也没有用，所以我认为它必须是我的链接或者我无法看到的东西，因为我是JQuery的新手。任何建议将不胜感激！这是我的代码：

    <section id="page6section2"><div class="page-header"><h1>Some Ideas</h1></div>
    <section id="page6section3"><div class="page-header"><h1>Conclusion</h1></div>

    <p><a href="#page6section2" id="someideas">Click here for some clues and ideas!</a>
    </p>
    <p><a href="#page6section3" id="conclusion">Click here for the conclusion!</a>

    .hidesection2 {display: none;}
    .hidesection3 {display: none;}  



    $(function() {
    $('#page6section2').addClass('hidesection2');});
    jQuery('#someideas').click(function(){
    jQuery('#page6section2').removeClass('hidesection2'); });
    $(function() {
    $('#page6section3').addClass('hidesection3');});
    jQuery('#conclusion').click(function(){
    jQuery('#page6section3').removeClass('hidesection3'); });

我确信可能还有一种更简单，更简洁的方法。

Answer 1

将你的功能放到窗口加载：

jQuery(window).load(function(){
   $('#page6section2').addClass('hidesection2');
   jQuery('#someideas').click(function(){
       jQuery('#page6section2').removeClass('hidesection2'); 
   });

   $('#page6section3').addClass('hidesection3');
   jQuery('#conclusion').click(function(){
        jQuery('#page6section3').removeClass('hidesection3'); 
   });
});

您的链接执行脚本时可能尚未加载DOM。这就是为什么你应该把它放到windows.load

Answer 2

这是一个使用data属性，CSS类和toggleClass（）方法的简单解决方案：

＆＃13;

$(document).ready(function() {
  $('.show-section').on('click', function() {
    var id = $(this).data('id'),
      $target = $('section[data-id="' + id + '"]');
    $target.toggleClass('shown');
  });
});

＆＃13;

section {
  display: none;
}
.shown {
  display: block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p class="show-section" data-id="1">Section 1</p>
<p class="show-section" data-id="2">Section 2</p>

<section data-id="1">
  <h1>Section 1</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore eum possimus, facere consequuntur alias, nesciunt vitae vero aliquid quo repellat totam sed. Aspernatur assumenda, dignissimos molestias iste temporibus dolores repellendus.</p>
</section>

<section data-id="2">
  <h1>section 2</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore eum possimus, facere consequuntur alias, nesciunt vitae vero aliquid quo repellat totam sed. Aspernatur assumenda, dignissimos molestias iste temporibus dolores repellendus.</p>
</section>

＆＃13;

隐藏页面部分，然后在单击链接时显示它 - JQuery

2 个答案: