Question

这是一个演示问题的小提琴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');
}

Answer 1

将last和First CSS类更改为：

/*** Styles for the main content sections ***/
div#who, div#what, div#how 
{ 
   height: 100%;
   margin: 0px;
   padding: 0px;
   float:left; // new
}

div.content 
{ 
   position:absolute; //new
   width: 500px;
   overflow: hidden;
   margin-left: auto;
   margin-right: auto;
}

编辑！

Answer 2

尝试使用jQuery Tabs，听起来就像您正在寻找的功能。

以下是您可以重构HTML以使用jQuery标签的示例：

<div class="tabs">
  <ul>
    <li>
      <a href="#who">About</a>
    </li>
    <li>
      <a href="#what">Skills</a>
    </li>
  </ul>
  <div id="who">
    <div class="content">
      <div id="latest" class="three_columns">

        <p>
          <strong>Boo!</strong>
        </p>

      </div>
    </div>
  </div><!-- #who -->
  <div id="what">
    <div class="content">
      <div id="consulting" class="three_columns">
        <p>
          <strong>Boo2!</strong>
        </p>
      </div>
    </div>
  </div><!-- #what -->
</div><!-- .tabs -->

浮动标题到两个不同的div

2 个答案: