jQuery SlideDown / SlideUp | “常見問題解答” | 開了

Question

我的名字並不代表我想的任何意思，但要說出我的問題很復雜。

因此，我在html“常見問題解答”中做了一個部分，當有人單擊一個問題時，答案就變成了slideDown。 如果我們單擊另一個問題，則關閉上一個問題（slideUp），然后打開您剛剛單擊的問題。 當我們單擊一個問題時，元素上的.addClass / removeClass會改變顏色。

我正在努力的問題是下一個：當我們加載頁面時，我希望已經打開一個元素而只有一個。 當我們單擊另一個時，將關閉前一個，依此類推。

一些代碼，說得好一點，有一個CodePen link 。 我想已經打開第二個元素：）

謝謝 ！

Answer 1

您可以只添加$('.faq ul li a:first').click(); 頁面加載后。 這將注冊第一個常見問題解答為公開。 我希望這是您$(function(){ ... }通話的最后一條語句

Answer 2

首先，使用DOM就緒的open類在元素上調用slideDown()函數。 然后，在具有open類的元素上調用slideUp方法，並在單擊時刪除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>