jQuery SlideDown / SlideUp | “常见问题”|开业

Question

我的头衔并不意味着什么，但说出我的问题很复杂。

所以，我在我的html“常见问题解答”中做了一个部分，当有人点击一个问题时，答案就是幻灯片。如果我们点击另一个问题，关闭前一个问题（slideUp）并打开你刚刚点击的那个问题。当我们点击一​​个问题时，颜色会随元素上的.addClass / removeClass而改变。

我正在努力解决的问题是下一个问题：当我们加载页面时，我希望已经打开了一个元素并且只有一个元素。当我们点击另一个时，将关闭前一个，依此类推。

一些代码，会说得更好一点，有一个CodePen link。我想第二个元素已经打开:)

谢谢 ！

Answer 1

首先，在DOM准备好的slideDown()类的元素上调用open函数。然后，使用slideUp类在元素上调用open方法，并在单击时删除open类。这应该做的伎俩：

$(function() {
  var $_openedFaq = null;
  
  //calling the slideDown to show the second element in the tabs
  $('a.open').next('p').slideDown();

  function openFaq($__p) {
    $__p.slideDown();
  }


  function closeFaq($__p) {
    $__p.slideUp();
  }

  $('.faq ul li').each(function() {

    var $faq = $(this);
    var $p = $(this).find('p');
    var offset = $(this).offset().top;


    $(this).find('a').click(function(e) {
      e.preventDefault();
      //on click hide the current active elements and remove the class from current active element
      $('a.open').next('p').slideUp();
      $('a.open').removeClass('open');

      $('html, body').animate({
        scrollTop: offset
      }, 500);

      // Test of code that i'm struggling with

      if ($('.faq ul li').find('a').hasClass("open")) {
        $p = $(this).next('p');
        openFaq($p);
      }

      // End of the test

      if ($_openedFaq != null) {
        closeFaq($_openedFaq.find('p'));

        $_openedFaq.find('a').removeClass("open");
      }


      if (($_openedFaq == null) || (($_openedFaq != null) && !$faq.is($_openedFaq))) {
        openFaq($p);

        $_openedFaq = $faq;

        $p.prev('a').addClass("open");

      } else {
        $_openedFaq = null;
      }
    });
  });
});

@font-face {
  font-family: 'Conv_Besom';
  src: url('../font/Besom.eot');
  src: local('☺'), url('../font/Besom.woff') format('woff'), url('../font/Besom.ttf') format('truetype'), url('../font/Besom.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: 'Roboto', sans-serif;
  letter-spacing: 1px;
  font-size: 14px;
  font-weight: 500;
}

section {
  background-color: #f9b40a;
}

.faq {
  background-color: #f5f5f5;
  padding-top: 65px;
  padding-bottom: 65px;
}

.faq div.container div.row div.col-sm-6 h1 {
  font-family: 'Source Serif Pro', serif;
  text-align: center;
  font-size: 60px;
  margin: 0;
  padding-bottom: 40px;
}

.faq div.container div.row div.col-sm-6 ul {
  list-style-type: none;
  padding: 0;
}

.faq div.container div.row div.col-sm-6 ul li {
  font-weight: bold;
  font-size: 14px;
  padding: 10px 10px;
  padding-top: 20px;
  border-bottom: 1px solid #bfbfbf;
  position: relative;
}

.faq div.container div.row div.col-sm-6 ul li:last-child {
  border-bottom: none;
}

.faq div.container div.row div.col-sm-6 ul li a {
  text-decoration: none;
  color: #4a4a4a;
  padding-right: auto;
  -webkit-transition: color 0.25s linear;
  -o-transition: color 0.25s linear;
  transition: color 0.25s linear;
}

.faq div.container div.row div.col-sm-6 ul li a:hover {
  color: black;
}

.faq div.container div.row div.col-sm-6 ul li a:hover::after {
  color: black;
}

.faq div.container div.row div.col-sm-6 ul li a::after {
  content: "\f067";
  font-family: 'FontAwesome';
  color: #f9b40a;
  position: absolute;
  top: 20px;
  right: 0;
  -webkit-transition: color 0.25s linear;
  -o-transition: color 0.25s linear;
  transition: color 0.25s linear;
}

.faq div.container div.row div.col-sm-6 ul li a.open {
  color: black;
}

.faq div.container div.row div.col-sm-6 ul li a.open::after {
  content: "\f068";
  font-family: 'FontAwesome';
  ;
  color: black;
  position: absolute;
  top: 20px;
  right: 0;
}

.faq div.container div.row div.col-sm-6 ul li p {
  font-weight: normal;
  display: none;
}

.faq div.container div.row div.col-sm-6 img {
  display: block;
  width: 100%;
}

<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Source+Serif+Pro" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="../includes/css/font-awesome.css">
<link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="faq">
  <div class="container">
    <div class="row">
      <div class="col-sm-6">
        <h1>FAQs</h1>
        <ul>
          <li>
            <a href="#">Question 1</a>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </p>
          </li>
          <li>
            <a class="open" href="#">Question 2</a>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </p>
          </li>
          <li>
            <a href="#">Question 3</a>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </p>
          </li>
          <li>
            <a href="#">Question 4</a>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </p>
          </li>
        </ul>
      </div>
      <div class="col-sm-6">
        <img src="https://media.forgecdn.net/avatars/107/154/636364134932167010.jpeg" alt="Are you ready ?">
      </div>
    </div>
  </div>
</section>

Answer 2

您可以在加载页面后添加$('.faq ul li a:first').click();。这将把第一个FAQ注册为open。我希望它是你的$(function(){ ... }电话的最后声明