jQuery SlideDown / SlideUp | "FAQ" |开业

Question

我猜我的标题没有任何意义，但命名我的问题很复杂。

所以，我在我的 html "faq" 中做了一个部分，当有人点击一个问题时，答案会通过幻灯片出现。如果我们单击另一个问题，则会关闭上一个问题 (slideUp) 并打开您刚刚单击的这个问题。当我们点击一个问题时，颜色会随着元素上的 .addClass / removeClass 而改变。

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

一些代码，会讲的好一点，有个CodePen link。我希望第二个元素已经打开:)

谢谢！

Answer 1

您可以在页面加载后添加 $('.faq ul li a:first').click();。这会将第一个常见问题解答注册为开放。我希望它是你 $(function(){ ... } 电话

的最后声明

Answer 2

首先，您在 DOM 上使用 open class 的元素调用 slideDown() 函数。然后，您在具有 open class 的元素上调用 slideUp 方法，并在单击时删除 open class。这应该可以解决问题：

$(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>

jQuery SlideDown / SlideUp | "FAQ" |开业

jQuery SlideDown / SlideUp | "FAQ" | Opened

javascript

jquery

slidedown

slideup