javascript - 如何在单击时在 div 之间淡入淡出，从不显示开始？

Question

我在寻找解决方案时在线遇到了这个 JSFiddle。它几乎可以满足我的需要，除了我需要从隐藏的 div 开始。我试过玩弄它，但作为 JS 的新手，我运气不佳。

我想我会把它放在这里作为起点，看看是否有人可以就我需要走的路线提出建议？

如有任何帮助，我们将不胜感激。

$(document).ready(function () {
    $('.pbox:gt(0)').hide();
    $('#menu').on('click', 'a', function () {
        $('.current').not($(this).closest('li').addClass('current')).removeClass('current');
        var $this = $(this);
        // fade out all open subcontents
        $('.pbox:visible').fadeOut('slow', function () {
            $('.pbox[id=' + $this.data('id') + ']').fadeIn('slow');
        });
    });
});

ul#menu {
    margin:0;
    padding:0;
    list-style-type:none;
    text-align: center;
}
ul#menu li {
    position:relative;
    float:left;
    border-bottom:4px solid #efefef;
    margin-right: 10px;
    padding-right: 0px;
    padding-bottom: 5px;
    display: inline-block;
}
ul#menu .current {
    border-bottom:4px solid #3d496a;
}
ul#menu li:hover {
    border-bottom:4px solid #3d496a;
}
ul#menu li a {
    padding:2px 2px;
    text-decoration:none;
    font:bold 8px Verdana, Georgia, "Times New Roman", Times, serif;
    color:#68759c;
}
ul#menu li a:hover {
    color:#8895b8;
    border:none;
}
#div1 {display:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu">
  <li><a href="#" data-id="div1">Description</a>
  </li>
  <li><a href="#" data-id="div2">Shipping and payment</a>
  </li>
  <li><a href="#" data-id="div3">Returns</a>
  </li>
  <li><a href="#" data-id="div4">Feedback</a>
  </li>
</ul>
<br>
<br>
<div class="pbox" id="div1">First Div</div>
<div class="pbox" id="div2">Second Div</div>
<div class="pbox" id="div3">Third Div</div>
<div class="pbox" id="div4">Fourth Div</div>

Answer 1

只需在 css 中添加 display: none; 到您想要隐藏的元素即可。

并从第一个 li 中删除 class="active"，这样它就不会被选中。

并稍微修改一下js。看看你的函数只显示一个 div，如果它以前隐藏的话。如果你从所有隐藏开始，它不会隐藏任何东西，因此它不会显示任何东西。

$(document).ready(function() {
  $('.pbox:gt(0)').hide();
  $('#menu').on('click', 'a', function() {
    $('.current').not($(this).closest('li').addClass('current')).removeClass('current');
    var $this = $(this);
    // fade out all open subcontents
    var visibleElements = $('.pbox:visible');
    if (visibleElements.length <= 0) {
        $('.pbox[id=' + $this.data('id') + ']').fadeIn('slow');
    } else {
      visibleElements.fadeOut('slow', function() {
        $('.pbox[id=' + $this.data('id') + ']').fadeIn('slow');
      });
    }
  });
});

ul#menu {
  margin: 0;
  padding: 0;
  list-style-type: none;
  text-align: center;
}

ul#menu li {
  position: relative;
  float: left;
  border-bottom: 4px solid #efefef;
  margin-right: 10px;
  padding-right: 0px;
  padding-bottom: 5px;
  display: inline-block;
}

ul#menu .current {
  border-bottom: 4px solid #3d496a;
}

ul#menu li:hover {
  border-bottom: 4px solid #3d496a;
}

ul#menu li a {
  padding: 2px 2px;
  text-decoration: none;
  font: bold 8px Verdana, Georgia, "Times New Roman", Times, serif;
  color: #68759c;
}

ul#menu li a:hover {
  color: #8895b8;
  border: none;
}

.pbox {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu">
  <li><a href="#" data-id="div1">Description</a>
  </li>
  <li><a href="#" data-id="div2">Shipping and payment</a>
  </li>
  <li><a href="#" data-id="div3">Returns</a>
  </li>
  <li><a href="#" data-id="div4">Feedback</a>
  </li>
</ul>
<br>
<br>
<div class="pbox" id="div1">First Div</div>
<div class="pbox" id="div2">Second Div</div>
<div class="pbox" id="div3">Third Div</div>
<div class="pbox" id="div4">Fourth Div</div>

编辑

如果你想在点击其他任何地方时隐藏所有的 div，这里是如何:

其实很简单。

我们将 click 事件绑定(bind)到文档并检查点击了什么。

如果它是带有内容的 div(#div1、#div2 等)或者如果它是菜单元素，我们不想隐藏 div，否则我们做。

$(document).on('click', function(e) {
  if (!$(e.target).hasClass("pbox") && $(e.target).closest("#menu").length <= 0) {
      $('.pbox').fadeOut('slow');
      $("#menu .current").removeClass("current");
    }
  });

e.target返回一个元素(在本例中)被点击。如果它具有 pbox 类，则表示这是一个包含内容的 div。

第二个条件是菜单元素。如果.closest()功能

Description: For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.

返回一个带有 id="menu" 的元素，这意味着我们点击了菜单内的一个元素。

注意感叹号。这意味着如果条件为假，则返回真。因此，如果我们没有单击包含内容的 div，并且如果我们没有单击菜单元素，那么我们将隐藏该 div。

我希望你明白我的意思:)

$(document).ready(function() {
  $('#menu').on('click', 'a', function() {
    $('.current').not($(this).closest('li').addClass('current')).removeClass('current');
    var $this = $(this);
    // fade out all open subcontents
    var visibleElements = $('.pbox:visible');
    if (visibleElements.length <= 0) {
      $('.pbox[id=' + $this.data('id') + ']').fadeIn('slow');
    } else {
      visibleElements.fadeOut('slow', function() {
        $('.pbox[id=' + $this.data('id') + ']').fadeIn('slow');
      });
    }
  });

  $(document).on('click', function(e) {
    if (!$(e.target).hasClass("pbox") && $(e.target).closest("#menu").length <= 0) {
      $('.pbox').fadeOut('slow');
      $("#menu .current").removeClass("current");
    }
  });
});

ul#menu {
  margin: 0;
  padding: 0;
  list-style-type: none;
  text-align: center;
}

ul#menu li {
  position: relative;
  float: left;
  border-bottom: 4px solid #efefef;
  margin-right: 10px;
  padding-right: 0px;
  padding-bottom: 5px;
  display: inline-block;
}

ul#menu .current {
  border-bottom: 4px solid #3d496a;
}

ul#menu li:hover {
  border-bottom: 4px solid #3d496a;
}

ul#menu li a {
  padding: 2px 2px;
  text-decoration: none;
  font: bold 8px Verdana, Georgia, "Times New Roman", Times, serif;
  color: #68759c;
}

ul#menu li a:hover {
  color: #8895b8;
  border: none;
}

.pbox {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu">
  <li><a href="#" data-id="div1">Description</a>
  </li>
  <li><a href="#" data-id="div2">Shipping and payment</a>
  </li>
  <li><a href="#" data-id="div3">Returns</a>
  </li>
  <li><a href="#" data-id="div4">Feedback</a>
  </li>
</ul>
<br>
<br>
<div class="pbox" id="div1">First Div</div>
<div class="pbox" id="div2">Second Div</div>
<div class="pbox" id="div3">Third Div</div>
<div class="pbox" id="div4">Fourth Div</div>