这是一个演示问题的小提琴http://jsfiddle.net/mjmitche/MMWXj/1/ 我有一个“关于”部分和一个“技能”部分。如果您单击其中任何一个部分的标题，则会出现一个显示相关内容的下拉菜单。如果“关于”是打开的，那么点击打开“技能”就会关闭。这里“关于”已被点击...
About
this is About content revealed by click
Skills
而这里的“技能”已被点击
About
Skills
this is Skills content revealed by click
与其将“关于”标题和“技能”标题堆叠在一起，我希望它们并排浮动，但每个 div 中内容的行为相同，就像这样（如果技能标题有被点击）
About Skills
this is Skills content revealed by click
这是基本的 html 结构（我暂时保留了一些不必要的位，因为担心一旦找到问题的解决方案，将这些位重新插入会改变事情）。
如果您能解释如何实现这一目标，我将不胜感激...
<div id="who">
<h1 class="who closed">About</h1>
<div class="content">
<div id="latest" class="three_columns">
<p>
<strong>Boo!</strong>
</p>
</div>
</div>
</div>
<div id="what">
<h1 class="what closed">Skills</h1>
<div class="content">
<div id="consulting" class="three_columns">
<p>
<strong>Boo2!</strong>
</p>
</div>
</div>
</div>
-- CSS
div.content { width: 500px; overflow: hidden; margin-left: auto; margin-right: auto;} /* This clears the floats of the child elements, see http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/ */
div.three_columns { float: left; width: 290px; margin: 0px; padding: 10px; }
#latest{
padding-left: 30px;
}
/* General headline styles */
/*h1 { font-size: 40px; margin: 0px; padding: 10px; cursor: pointer; }
h2 { font-size: 16px; }*/
h1.who, h1.what, h1.how {
margin-left: auto;
margin-right: auto;
width: 80%;
text-align: center;
}
h2.who, h2.what, h2.how {
margin-left: auto;
margin-right: auto;
width: 80%;
text-align: center;
}
.blue { color: #00b9f1; }
.green { color: #99cc00; }
/* General link styles - Colors: pink #ec008b, blue #00b9f1, dark gray #222, light gray #ebebeb; */
/*a { color: #222222; text-decoration: none; }
h1.hover, a:hover { color: #ec008b; cursor: pointer; }
h1.active, a:active { color: #00b9f1; cursor: pointer; }*/
/* General list styles */
ul { margin: 0px; padding: 0px; }
ul li { margin: 0px; padding: 0px; list-style: none; }
#cent {
margin-left: auto;
margin-right: auto;
width:
}
/*** Styles for the main content sections ***/
div#who, div#what, div#how { height: 100%; margin: 0px; padding: 0px; }
JS
$(function() {
// Hide all closed sections
$(".closed").next().hide();
// Add slide functions to all sections (h1 elements)
$("h1").click(function () {
if($(this).is('.closed')) {
$(".open").delay(200, function() { $(this).next().slideUp("slow"); });
$(this).delay(200, function() { $(this).next().slideDown("slow"); });
$("h1").deactivateElement();
$(this).activateElement();
}
else if($(this).is('.open')) {
$(this).delay(200, function() { $(this).next().slideUp("slow"); });
$(this).deactivateElement();
}
});
// Add a function to toggle the CSS styles
$("a#style_switcher").click(function () { flag = !flag; dark.disabled = flag; });
// Add hover functions to all sections (h1 elements)
$("h1").hover(function() { $(this).addClass('hover'); }, function() { $(this).removeClass('hover'); });
// Delay the call to (slide) functions
// => http://james.padolsey.com/javascript/jquery-delay-plugin/
$.fn.delay = function(time, callback) {
jQuery.fx.step.delay = function() {};
return this.animate( { delay: 1 }, time, callback);
}
// Set an element class to 'open' or 'closed'
$.fn.activateElement = function() { switchClasses($(this), 'open', 'closed'); }
$.fn.deactivateElement = function() { switchClasses($(this), 'closed', 'open'); }
// Do this at start
initialize();
$(".who").delay(600, function() { $(this).next().slideDown("slow"); });
$(".who").activateElement();
});
// Initialization function
function initialize () {
flag = true;
dark = document.getElementById("dark_css");
dark.disabled = flag;
// Set year in copyright section
document.getElementById('year').innerHTML = (new Date()).getFullYear();
}
// Utility function for switching/toggling classes
function switchClasses (element, classToAdd, classToRemove) {
element.addClass(classToAdd);
element.removeClass(classToRemove);
// De/Activate the given element
(classToAdd == 'open') ? element.addClass('active') : element.removeClass('active');
}