Question

我还在学习JavaScript / jQuery，我试图以最少的措辞来打开和关闭div，我试图摆脱重复自己的习惯，因为它更容易编码。

$(document).ready(function() {
  
  $(function () {

    $('#section-two, #section-three').css('display', 'none');

    $('.section-opener').function (e) {
      e.preventDefault();
  
      var target = $(this).data("target");
      var $target = $(target);
  
      $('.section').not($target).stop(true, true).css('display', 'none');
      $target.stop(true, true).css('display', 'block');

  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="#" class="section-opener"><h4>Section One</h4></a>
<div class="section" id="section-one">
  <p>I am inside section one</p>
</div>

<a href="#" class="section-opener"><h4>Section Two</h4></a>
<div class="section" id="section-two">
  <p>I am inside section two</p>
</div>  

<a href="#" class="section-opener"><h4>Section Three</h4></a>
<div class="section" id="section-three">
  <p>I am inside section three</p>
</div>

我没有运气，因为目前没有任何运作。

Answer 1

您的代码非常混乱，看起来也不正确。

当你提到关闭和打开时，它似乎意味着显示和隐藏而不是通常被认为是＆＃34;关闭＆＃34;，即</div>

此外，您似乎正在使用JavaScript来设置应该使用CSS的初始显示：

<style>
  #section-two, #section-three{
     display: none;
  }
</style>

您的.stop()和.function()以及target，$target都会使您的代码难以理解。我建议阅读一些教程来理解基础知识，因为看起来你不理解你正在编写的代码。

另外，也许您正在寻找$().show()和$().hide()函数？这些会执行display:block和display:none快捷方式。

我创建了一个jsfiddle来完成我想要的你想要的东西：

http://jsfiddle.net/48xuvL6y/1/

JS：

$(document).ready(function () {
    $('.section-opener').on('click', function (e) {
        e.preventDefault();

        var target = $(this).data("target");

        $('.section').hide();

        $(target).show();
    });
});

CSS：

.section {
    display: none;
}

使用jQuery打开和关闭div，减少措辞

1 个答案: