单击一次slideup div

Question

我已经使用jquery完成了slideup和slidedown div。 我在这里有三个框。单击标题后，内容将打开。 然后单击另一个标题，该内容将打开，而旧内容将关闭。 但是我继续关闭相同的内容。 任何时候都打开任何内容。 我需要一旦我们单击头部，内容就需要关闭。

 $(document).ready(function() { $("p").click(function() { $this = $(this); var parent = $this.closest('.acc'); $("p").removeClass('open'); $this.addClass('open'); $('.acc-body').slideUp(); parent.find('.acc-body').slideDown(); }); }); 

 body { padding: 0; margin: 0; } *, *:before, *:after { box-sizing: border-box; } .acc { padding: 0px; margin: 0; } .acc-head { padding: 15px; margin: 0; background: #ccc; } .acc-head.open { background: #000; color: #fff; } .acc-body { border: 1px solid #ccc; display: none; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div style="max-width: 500px;"> <div class="acc"> <p class="acc-head"> head </p> <div class="acc-body"> Learn by examples! At W3Schools you will find a lot of jQuery examples to edit and test yourself. </div> </div> <div class="acc"> <p class="acc-head"> head </p> <div class="acc-body"> Learn by examples! At W3Schools you will find a lot of jQuery examples to edit and test yourself. </div> </div> <div class="acc"> <p class="acc-head"> head </p> <div class="acc-body"> Learn by examples! At W3Schools you will find a lot of jQuery examples to edit and test yourself. </div> </div> </div> 

Answer 1

要解决此问题，请在.acc-body上使用slideToggle() ，并使用not()将其从slideUp()排除。 相同的模式适用于在p元素上添加和删除open类。

 $(document).ready(function() { $("p").click(function() { var $this = $(this); var $target = $this.next(); $("p").not($this).removeClass('open'); $this.toggleClass('open'); $('.acc-body').not($target).slideUp(); $target.slideToggle(); }); }); 

 body { padding: 0; margin: 0; } *, *:before, *:after { box-sizing: border-box; } .acc { padding: 0px; margin: 0; } .acc-head { padding: 15px; margin: 0; background: #ccc; } .acc-head.open { background: #000; color: #fff; } .acc-body { border: 1px solid #ccc; display: none; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div style="max-width: 500px;"> <div class="acc"> <p class="acc-head"> head </p> <div class="acc-body"> Learn by examples! At W3Schools you will find a lot of jQuery examples to edit and test yourself. </div> </div> <div class="acc"> <p class="acc-head"> head </p> <div class="acc-body"> Learn by examples! At W3Schools you will find a lot of jQuery examples to edit and test yourself. </div> </div> <div class="acc"> <p class="acc-head"> head </p> <div class="acc-body"> Learn by examples! At W3Schools you will find a lot of jQuery examples to edit and test yourself. </div> </div> </div> 

Answer 2

只要看看第一个为头拥有类open 。

像这样固定

$(document).ready(function(){
         $("p").click(function(){
            $this = $(this);
            if($this.hasClass('open')){
                $this.removeClass('open');
                $this.siblings('.acc-body').slideUp();
            }else{
                var parent = $this.closest('.acc');
                $("p").removeClass('open');
                $this.addClass('open');
                $('.acc-body').slideUp();
                parent.find('.acc-body').slideDown();
            }
        });
    });

希望能帮助到你！ :)

Answer 3

这是您的解决方案！！！

使用Jquery hasClass（）函数可以解决此问题。 首先，我们需要检查clicked元素是否具有类。 如果具有'open'类，则执行slideup函数，否则执行slideDown函数。并删除其他'p'的所有开放类。

我们也可以使用slideToggle（）解决此功能。

 $(document).ready(function(){ $("p").click(function(){ $this = $(this); if($this.hasClass('open')){ $this.removeClass('open'); $('.acc-body').slideUp(); }else{ var parent = $this.closest('.acc'); $('p').removeClass('open'); $this.addClass('open') $('.acc-body').slideUp(); parent.find('.acc-body').slideDown(); }; }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <style> body{ padding: 0; margin: 0; } *, *:before, *:after{ box-sizing: border-box; } .acc{ padding: 0px; margin: 0; } .acc-head{ padding: 15px; margin: 0; background: #ccc; } .acc-head.open{ background: #000; color: #fff; } .acc-body{ border: 1px solid #ccc; display: none; } </style> <div style="max-width: 500px;"> <div class="acc"> <p class="acc-head"> head1 </p> <div class="acc-body"> Learn by examples! At W3Schools you will find a lot of jQuery examples to edit and test yourself. </div> </div> <div class="acc"> <p class="acc-head"> head2 </p> <div class="acc-body"> Learn by examples! At W3Schools you will find a lot of jQuery examples to edit and test yourself. </div> </div> <div class="acc"> <p class="acc-head"> head3 </p> <div class="acc-body"> Learn by examples! At W3Schools you will find a lot of jQuery examples to edit and test yourself. </div> </div> 

Answer 4

使用简单手风琴：

 var acc = document.getElementsByClassName("accordion"); var i; for (i = 0; i < acc.length; i++) { acc[i].addEventListener("click", function() { this.classList.toggle("active"); var panel = this.nextElementSibling; if (panel.style.display === "block") { panel.style.display = "none"; } else { panel.style.display = "block"; } }); } 

 .accordion { background-color: #eee; color: #444; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; transition: 0.4s; } .active, .accordion:hover { background-color: #ccc; } .panel { padding: 0 18px; display: none; background-color: white; overflow: hidden; } 

 <div class="accordion">Section 1</div> <div class="panel"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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> </div> <div class="accordion">Section 2</div> <div class="panel"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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> </div> <div class="accordion">Section 3</div> <div class="panel"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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> </div>