手风琴内容出现和消失的滑动效果

Question

我创造了这个非常简单的手风琴。 一切都很好，除了我在移动设备上进行测试时。 当内容可见发生变化时，不同元素之间会出现这种“尴尬的跳跃”。 同样出于某种原因，当我尝试添加 jQuery slideDown 方法时，它不起作用，所以所有内容都从一个部分跳到另一个部分，感觉很尴尬。 这是代码：

 $(".container-out").click(function(){ $(".container-content").removeClass("active").eq($(this).index()).addClass("active"); });

 .container-content { display: none; }.active { display: block; } h2 { padding: 20px; background: black; color: white; }

 <div class="container-out"> <div class="container-link"> <h2>ONE</h2> </div> <div class="container-content active"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mattis rhoncus urna neque viverra. Fringilla ut morbi tincidunt augue interdum velit euismod in pellentesque. Lobortis scelerisque fermentum dui faucibus in ornare quam. Eget lorem dolor sed viverra ipsum nunc. At erat pellentesque adipiscing commodo elit. Viverra nam libero justo laoreet. Leo duis ut diam quam nulla porttitor. Euismod nisi porta lorem mollis aliquam ut. Aliquam etiam erat velit scelerisque in. Nibh cras pulvinar mattis nunc sed blandit libero. Massa tincidunt dui ut ornare lectus sit amet est placerat. Consectetur libero id faucibus nisl tincidunt eget nullam non nisi. Porta nibh venenatis cras sed felis eget. </div> </div> <div class="container-out"> <div class="container-link"> <h2>TWO</h2> </div> <div class="container-content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mattis rhoncus urna neque viverra. Fringilla ut morbi tincidunt augue interdum velit euismod in pellentesque. Lobortis scelerisque fermentum dui faucibus in ornare quam. Eget lorem dolor sed viverra ipsum nunc. At erat pellentesque adipiscing commodo elit. Viverra nam libero justo laoreet. Leo duis ut diam quam nulla porttitor. Euismod nisi porta lorem mollis aliquam ut. Aliquam etiam erat velit scelerisque in. Nibh cras pulvinar mattis nunc sed blandit libero. Massa tincidunt dui ut ornare lectus sit amet est placerat. Consectetur libero id faucibus nisl tincidunt eget nullam non nisi. Porta nibh venenatis cras sed felis eget. </div> </div> <div class="container-out"> <div class="container-link"> <h2>THREE</h2> </div> <div class="container-content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mattis rhoncus urna neque viverra. Fringilla ut morbi tincidunt augue interdum velit euismod in pellentesque. Lobortis scelerisque fermentum dui faucibus in ornare quam. Eget lorem dolor sed viverra ipsum nunc. At erat pellentesque adipiscing commodo elit. Viverra nam libero justo laoreet. Leo duis ut diam quam nulla porttitor. Euismod nisi porta lorem mollis aliquam ut. Aliquam etiam erat velit scelerisque in. Nibh cras pulvinar mattis nunc sed blandit libero. Massa tincidunt dui ut ornare lectus sit amet est placerat. Consectetur libero id faucibus nisl tincidunt eget nullam non nisi. Porta nibh venenatis cras sed felis eget. </div> </div> <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"> </script>

非常感谢任何建议！

Answer 1

基于您的代码的工作示例与 slideDown。

 $(".container-link").click(function(){ var $targetPanel = $(this).nextAll('.container-content'); if(.$targetPanel.hasClass('active')){ $('.container-content.active').removeClass('active');slideUp(). $targetPanel.addClass('active');slideDown(); } });

 .container-content { display: none; }.active { } h2 { padding: 20px; background: black; color: white; }

 <div class="container-out"> <div class="container-link"> <h2>ONE</h2> </div> <div class="container-content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mattis rhoncus urna neque viverra. Fringilla ut morbi tincidunt augue interdum velit euismod in pellentesque. Lobortis scelerisque fermentum dui faucibus in ornare quam. Eget lorem dolor sed viverra ipsum nunc. At erat pellentesque adipiscing commodo elit. Viverra nam libero justo laoreet. Leo duis ut diam quam nulla porttitor. Euismod nisi porta lorem mollis aliquam ut. Aliquam etiam erat velit scelerisque in. Nibh cras pulvinar mattis nunc sed blandit libero. Massa tincidunt dui ut ornare lectus sit amet est placerat. Consectetur libero id faucibus nisl tincidunt eget nullam non nisi. Porta nibh venenatis cras sed felis eget. </div> </div> <div class="container-out"> <div class="container-link"> <h2>TWO</h2> </div> <div class="container-content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mattis rhoncus urna neque viverra. Fringilla ut morbi tincidunt augue interdum velit euismod in pellentesque. Lobortis scelerisque fermentum dui faucibus in ornare quam. Eget lorem dolor sed viverra ipsum nunc. At erat pellentesque adipiscing commodo elit. Viverra nam libero justo laoreet. Leo duis ut diam quam nulla porttitor. Euismod nisi porta lorem mollis aliquam ut. Aliquam etiam erat velit scelerisque in. Nibh cras pulvinar mattis nunc sed blandit libero. Massa tincidunt dui ut ornare lectus sit amet est placerat. Consectetur libero id faucibus nisl tincidunt eget nullam non nisi. Porta nibh venenatis cras sed felis eget. </div> </div> <div class="container-out"> <div class="container-link"> <h2>THREE</h2> </div> <div class="container-content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mattis rhoncus urna neque viverra. Fringilla ut morbi tincidunt augue interdum velit euismod in pellentesque. Lobortis scelerisque fermentum dui faucibus in ornare quam. Eget lorem dolor sed viverra ipsum nunc. At erat pellentesque adipiscing commodo elit. Viverra nam libero justo laoreet. Leo duis ut diam quam nulla porttitor. Euismod nisi porta lorem mollis aliquam ut. Aliquam etiam erat velit scelerisque in. Nibh cras pulvinar mattis nunc sed blandit libero. Massa tincidunt dui ut ornare lectus sit amet est placerat. Consectetur libero id faucibus nisl tincidunt eget nullam non nisi. Porta nibh venenatis cras sed felis eget. </div> </div> <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"> </script>