打开手风琴面板机身一个或多个

Question

我是编码新手。我需要创建一个手风琴，它是用html创建的，并使用jQuery来展开折叠面板。当我尝试打开第一个面板时，它会打开，而当我尝试打开第二个面板时，第一个面板会关闭，这是我不希望发生的。我需要一个简单的jQuery方法来实现这一目标。

if ($(this).next().is(':hidden') !== true) {
        $(this).removeClass('active');
        $(this).next().slideUp("fast");
        //var height = $(this).clientHeight;
    } else {
        $('.panelHeading').removeClass('active');
        $('.panelBody').slideUp('fast');
        if ($(this).next().is(':hidden') === true) {
            $(this).addClass('active');
            $(this).next().slideDown('fast');
        }

这将在打开另一个面板时关闭一个面板。我希望打开的面板即使打开另一个面板也能保持打开状态。

$(document).ready(function() {
  $('.question').click(function() {

    if ($(this).next().is(':hidden') !== true) {
      $(this).removeClass('active');
      $(this).next().slideUp("normal");
    } else {
      $('.question').removeClass('active');
      $('.answer').slideUp('normal');
      if ($(this).next().is(':hidden') === true) {
        $(this).addClass('active');
        $(this).next().slideDown('normal');
      }
    }
  });

  $('.answer').hide();

  $('.expand').click(function(event) {
    $('.question').next().slideDown('normal'); {
      $('.question').addClass('active');
    }
  });

  $('.collapse').click(function(event) {
    $('.question').next().slideUp('normal'); {
      $('.question').removeClass('active');
    }
  });
});

#wrapper {
  margin-left: auto;
  margin-right: auto;
  padding-top: 30px;
  font-family: verdana;
  font-size: 12px;
}

.question {
  width: 400px;
  float: left;
  background: #fff;
  padding-left: 20px;
  padding-top: 18px;
  cursor: pointer;
  background-position: 4px -19px;
  background-repeat: no-repeat;
}

.answer {
  width: 400px;
  float: left;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-left: 20px;
  background: #fff;
}

.question::before {
  content: '\25B6';
  color: red;
}

.active:before {
  content: '\25E2';
}

a {
  color: #000;
  text-decoration: none
}

a:hover {
  text-decoration: underline
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<div id="wrapper">

  <div style="float:right;"><a href="javascript:void(0)" class="expand">Expand All</a> | <a href="javascript:void(0)" class="collapse">Collapse All</a></div>

  <div class="question"><span class="head">Lorem ipsum dolor sit amet?</span></div>
  <div class="answer">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nec ligula lorem. Mauris laoreet sagittis sem, nec pulvinar neque tempus sit amet. Fusce at mi tortor, eget blandit velit. Phasellus sed dolor at felis auctor mollis nec eget nisl. Fusce
    pretium nibh nisi. Aliquam congue iaculis velit, id facilisis elit pharetra a. Nulla posuere nunc vel tortor blandit sit amet tristique dolor venenatis. Phasellus nunc odio, feugiat non egestas ut, rutrum ac elit. Pellentesque iaculis tempor diam
    quis ultricies. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed ullamcorper, enim non imperdiet dictum, nisl eros interdum turpis, sed posuere diam ante ac orci. Pellentesque et malesuada elit.

  </div>
  <div class="question"><span class="head">Vestibulum in ornare metus?</span></div>
  <div class="answer">
    Vestibulum in ornare metus. Integer in libero vitae eros bibendum ultricies. Cras ultricies risus eu massa tincidunt faucibus rutrum enim malesuada. Nullam non est a nunc tincidunt porttitor a ac odio. Cras accumsan ante in odio ultrices semper. Fusce
    dignissim eleifend vehicula. Aenean dictum ante et lorem lacinia vel fringilla urna vestibulum. Duis condimentum felis in ligula venenatis et auctor massa dapibus. Morbi tincidunt elit a odio scelerisque sodales. Integer et egestas lorem. Suspendisse
    tincidunt varius augue, ac fermentum erat ultricies laoreet. Donec eu dolor justo, a convallis lectus. Pellentesque pellentesque, erat ut dictum lacinia, orci nulla posuere tellus, at gravida nibh tellus dictum velit. Donec molestie sapien non dolor
    tincidunt eget interdum tortor molestie. Curabitur placerat scelerisque odio, at congue purus malesuada et.

  </div>
  <div class="question"><span class="head">Donec sagittis massa tristique urna placerat?</span></div>
  <div class="answer">
    Donec sagittis massa tristique urna placerat at facilisis tortor accumsan. Etiam pulvinar scelerisque mi eu euismod. Donec tempor euismod condimentum. Vivamus consequat tempus est sit amet blandit. Sed malesuada libero in risus fermentum ornare et sed
    risus. Duis ut odio nibh. Vivamus pulvinar porta dui, at adipiscing nunc rutrum ut. Nullam elementum pretium faucibus. Quisque faucibus viverra lacus eget consequat. Pellentesque ut tristique nulla. Duis lacus velit, gravida sit amet molestie vitae,
    dignissim in lectus. Quisque rhoncus nibh a ligula dictum quis ultrices risus lobortis. Cras volutpat, tortor ac porta mattis, turpis nisl lobortis purus, sed aliquet purus lorem eu tellus. Nunc lacinia bibendum vehicula. Phasellus ut augue eget tortor
    viverra molestie at nec ante. Cras venenatis, quam eget rutrum semper, turpis mauris scelerisque lacus, eget placerat urna ante eget diam. Suspendisse quis posuere est. Sed quis magna vitae tellus eleifend iaculis sit amet et ligula. Phasellus mollis
    nunc id dolor malesuada placerat. Fusce posuere congue est eu euismod.
  </div>
  <div class="question"><span class="head">Nulla nec egestas quam?</span></div>
  <div class="answer">
    Nulla nec egestas quam. Sed gravida libero nec felis consequat elementum. Vivamus ante erat, malesuada sed dictum ac, mattis rhoncus nunc. Mauris libero eros, euismod vitae varius at, pellentesque ac nisl. Pellentesque lobortis, felis eget scelerisque
    adipiscing, erat nisi vehicula orci, vel dictum velit orci non ipsum. Aliquam egestas erat sit amet tortor feugiat eu volutpat erat laoreet. Fusce lacinia, dui ac sodales cursus, est eros accumsan metus, sit amet ornare ligula diam eget nisl. Sed
    nec lectus tellus. Phasellus malesuada volutpat luctus. Praesent fringilla feugiat sem quis feugiat. Morbi lorem ante, fermentum et egestas vel, pellentesque in eros. Aliquam ut ipsum ullamcorper nunc cursus consequat. Fusce sagittis convallis risus,
    vel accumsan orci scelerisque ut. Curabitur nec sollicitudin nibh. Pellentesque vitae nunc ac nibh lobortis porttitor. Duis sit amet ante lectus, luctus vehicula nisl.
  </div>


</div>

Answer 1

您可以做一些简单的事情：

$(document).ready(function() {
  $('.question').click(function() {
    $(this).toggleClass('active');//toggle on/off the active class
    $(this).next().slideToggle('normal');// toggle up/down the slide

  });
});

demo

Answer 2

您只需点击问题即可更改以下代码；

$('.question').click(function() {
    if($(this).next().is(':hidden') !== true) {
        $(this).removeClass('active'); 
        $(this).next().slideUp("normal");
    } else {
        $(this).addClass('active');
        $(this).next().slideDown('normal');
    }
});

还找到了工作jsfiddle here。

$(document).ready(function() { 
    $('.question').click(function() {
        if($(this).next().is(':hidden') !== true) {
            $(this).removeClass('active'); 
            $(this).next().slideUp("normal");
        } else {
            $(this).addClass('active');
            $(this).next().slideDown('normal');
        }
    });
    
    $('.answer').hide();
    $('.expand').click(function(event)
      {$('.question').next().slideDown('normal');
          {$('.question').addClass('active');}
      }
    );
 
    $('.collapse').click(function(event)
      {$('.question').next().slideUp('normal');
          {$('.question').removeClass('active');}
      }
    );
});

#wrapper {
  margin-left: auto;
  margin-right: auto;
    padding-top:30px;
    font-family:verdana;
    font-size:12px;
  }

.question {  
  width: 400px;
  float: left;
  background: #fff;
  padding-left:20px;
  padding-top:18px;
  cursor: pointer;
  background-position : 4px -19px;
  background-repeat : no-repeat;
  }
  
.answer {  
  width: 400px;
  float: left;
  padding-top:10px;
  padding-bottom:10px;
  margin-left:20px;
  background: #fff;
  }
  .question::before{
    content: '\25B6';
    color: red;
  }
  .active:before {
  content: '\25E2';
  }
    
  
  a{color:#000;text-decoration:none}
  a:hover{text-decoration:underline}

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<body>
  
  <div id="wrapper">
    
    <div style="float:right;"><a href="javascript:void(0)" class="expand">Expand All</a> | <a href="javascript:void(0)" class="collapse">Collapse All</a></div>
    
    <div class="question"><span class="head">Lorem ipsum dolor sit amet?</span></div>
    <div class="answer">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nec ligula lorem. Mauris laoreet sagittis sem, nec pulvinar neque tempus sit amet. Fusce at mi tortor, eget blandit velit. Phasellus sed dolor at felis auctor mollis nec eget nisl. Fusce pretium nibh nisi. Aliquam congue iaculis velit, id facilisis elit pharetra a. Nulla posuere nunc vel tortor blandit sit amet tristique dolor venenatis. Phasellus nunc odio, feugiat non egestas ut, rutrum ac elit. Pellentesque iaculis tempor diam quis ultricies. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed ullamcorper, enim non imperdiet dictum, nisl eros interdum turpis, sed posuere diam ante ac orci. Pellentesque et malesuada elit.

    </div>
        <div class="question"><span class="head">Vestibulum in ornare metus?</span></div>
    <div class="answer">
Vestibulum in ornare metus. Integer in libero vitae eros bibendum ultricies. Cras ultricies risus eu massa tincidunt faucibus rutrum enim malesuada. Nullam non est a nunc tincidunt porttitor a ac odio. Cras accumsan ante in odio ultrices semper. Fusce dignissim eleifend vehicula. Aenean dictum ante et lorem lacinia vel fringilla urna vestibulum. Duis condimentum felis in ligula venenatis et auctor massa dapibus. Morbi tincidunt elit a odio scelerisque sodales. Integer et egestas lorem. Suspendisse tincidunt varius augue, ac fermentum erat ultricies laoreet. Donec eu dolor justo, a convallis lectus. Pellentesque pellentesque, erat ut dictum lacinia, orci nulla posuere tellus, at gravida nibh tellus dictum velit. Donec molestie sapien non dolor tincidunt eget interdum tortor molestie. Curabitur placerat scelerisque odio, at congue purus malesuada et.

    </div>
        <div class="question"><span class="head">Donec sagittis massa tristique urna placerat?</span></div>
    <div class="answer">
    Donec sagittis massa tristique urna placerat at facilisis tortor accumsan. Etiam pulvinar scelerisque mi eu euismod. Donec tempor euismod condimentum. Vivamus consequat tempus est sit amet blandit. Sed malesuada libero in risus fermentum ornare et sed risus. Duis ut odio nibh. Vivamus pulvinar porta dui, at adipiscing nunc rutrum ut. Nullam elementum pretium faucibus. Quisque faucibus viverra lacus eget consequat. Pellentesque ut tristique nulla. Duis lacus velit, gravida sit amet molestie vitae, dignissim in lectus. Quisque rhoncus nibh a ligula dictum quis ultrices risus lobortis. Cras volutpat, tortor ac porta mattis, turpis nisl lobortis purus, sed aliquet purus lorem eu tellus. Nunc lacinia bibendum vehicula. Phasellus ut augue eget tortor viverra molestie at nec ante. Cras venenatis, quam eget rutrum semper, turpis mauris scelerisque lacus, eget placerat urna ante eget diam. Suspendisse quis posuere est. Sed quis magna vitae tellus eleifend iaculis sit amet et ligula. Phasellus mollis nunc id dolor malesuada placerat. Fusce posuere congue est eu euismod.
    </div>
        <div class="question"><span class="head">Nulla nec egestas quam?</span></div>
    <div class="answer">
Nulla nec egestas quam. Sed gravida libero nec felis consequat elementum. Vivamus ante erat, malesuada sed dictum ac, mattis rhoncus nunc. Mauris libero eros, euismod vitae varius at, pellentesque ac nisl. Pellentesque lobortis, felis eget scelerisque adipiscing, erat nisi vehicula orci, vel dictum velit orci non ipsum. Aliquam egestas erat sit amet tortor feugiat eu volutpat erat laoreet. Fusce lacinia, dui ac sodales cursus, est eros accumsan metus, sit amet ornare ligula diam eget nisl. Sed nec lectus tellus. Phasellus malesuada volutpat luctus. Praesent fringilla feugiat sem quis feugiat. Morbi lorem ante, fermentum et egestas vel, pellentesque in eros. Aliquam ut ipsum ullamcorper nunc cursus consequat. Fusce sagittis convallis risus, vel accumsan orci scelerisque ut. Curabitur nec sollicitudin nibh. Pellentesque vitae nunc ac nibh lobortis porttitor. Duis sit amet ante lectus, luctus vehicula nisl.
    </div>


  </div>
  
</body>

Answer 3

希望这就是您想要的。

(function(factory) {
	if (typeof define === 'function' && define.amd) {
		define(['jquery'], factory);
	} else if (typeof module === 'object' && module.exports) {
		module.exports = function(root, jQuery) {
			if (jQuery === undefined) {
				if (typeof window !== 'undefined') {
					jQuery = require('jquery');
				} else {
					jQuery = require('jquery')(root);
				}
			}
			factory(jQuery);
			return jQuery;
		};
	} else {
		factory(jQuery);
	}
}(function($) {

	var originalToggle = $.ui.accordion.prototype._toggle;

	$.extend($.ui.accordion.prototype, {
		multiple: false,
		_toggle: function(data) {
			if (this.options.multiple && data.newPanel.length) {
				data.oldPanel = data.oldHeader = this.prevShow = $('');

				if (this.options.collapsible && data.newPanel.is(':visible')) {
					data.oldPanel = data.newPanel;
					data.newPanel = $('');
				}
			}
			originalToggle.apply(this, arguments);
		}
	});

}));

	  $( function() {
    var icons = {
      header: "ui-icon-circle-arrow-e",
      activeHeader: "ui-icon-circle-arrow-s"
    };
    $( "#accordion" ).accordion({
	collapsible: true,
	  multiple: true,
	  active: 1,
      icons: icons
    });
  
  } );

#wrapper {
  margin-left: auto;
  margin-right: auto;
  padding-top: 30px;
  font-family: verdana;
  font-size: 12px;
}

.question {
  width: 400px;
  float: left;
  background: #fff;
  padding-left: 20px;
  padding-top: 18px;
  cursor: pointer;
  background-position: 4px -19px;
  background-repeat: no-repeat;
}

.answer {
  width: 400px;
  float: left;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-left: 20px;
  background: #fff;
}

.question::before {
  content: '\25B6';
  color: red;
}

.active:before {
  content: '\25E2';
}

a {
  color: #000;
  text-decoration: none
}

a:hover {
  text-decoration: underline
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

<div id="accordion">
  <h3>Section 1</h3>
  <div>
    <p>
    Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
    ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
    amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
    odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
    </p>
  </div>
  <h3>Section 2</h3>
  <div>
    <p>
    Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
    purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
    velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
    suscipit faucibus urna.
    </p>
  </div>
  <h3>Section 3</h3>
  <div>
    <p>
    Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
    Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
    ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
    lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
    </p>
    <ul>
      <li>List item one</li>
      <li>List item two</li>
      <li>List item three</li>
    </ul>
  </div>
  <h3>Section 4</h3>
  <div>
    <p>
    Cras dictum. Pellentesque habitant morbi tristique senectus et netus
    et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
    faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
    mauris vel est.
    </p>
    <p>
    Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
    inceptos himenaeos.
    </p>
  </div>
</div>