javascript - 使用 JQuery 控制 CSS Float

Question

我正在编写类似于 JQuery UI Accordion 的东西，但是是垂直的。除了一个异常(exception)，我让它工作得很好。当您单击第三个选项卡时，它会向左浮动并按预期显示所需的文本，但它会移动到第二个选项卡之前的位置。使 Tab 键顺序为 132 而不是 123。在所有其他状态下，数字都正常。

关于让 float 以正确的顺序停止的任何想法

我知道可以使用其他垂直 Accordion ，但 js 是我的弱项之一，我更多地这样做是为了学习。

我把它保存在 jsfiddle 上

我的 Javascript 代码

    $(document).ready(function(){
            $("#1").css("background-color","#191970");
            $("#1").css("width", "50px");
            $("#1").css("float", "left");
            $("#2").css("background-color","#191970");
            $("#2").css("width", "50px");
            $("#2").css("float", "right");
            $("#3").css("background-color","#191970");
            $("#3").css("width", "50px");
            $("#3").css("float", "right");
            $("#boxmain").css("background-color", "#CCC");
            $("#boxmain").css("width", "400px");

            $("#boxmain").text($("#onet").text());
            $('p').hide();



    $("#1").click(function() {
            $("#2").css("float", "right");
            $("#3").css("float", "right");
            $("#boxmain").effect("highlight", {color: '#DDD'}, 900);
            $("#boxmain").text($("#onet").text());
    });

    $("#2").click(function() {
            $("#2").css("float", "left");
            $("#3").css("float", "right");
            $("#boxmain").effect("highlight", {color: '#DDD'}, 900);
            $("#boxmain").text($("#twot").text());
    });

    $("#3").click(function() {
            $("#3").css("float", "left");
            $("#2").css("float", "left");
            $("#boxmain").effect("highlight", {color: '#DDD'}, 900);
            $("#boxmain").text($("#threet").text());
    });
});

Answer 1

我可以帮助您大大简化这个过程。有很多东西要读，但你可以在 jsfiddle 看到它在工作首先，如果你喜欢。你不需要交换 float ，你可以交换不同的容器。 首先，一些 CSS:

.accordion {
    height:200px;
    float: left;
    border:#fff solid 1px;
    border-radius: 10px 10px 10px 10px;
    color:white;
    width: 50px;
    background: #191970;
}

.boxMain {
    width: 400px;
    background: #CCC;
}

然后是 HTML- 注意我是如何使用 accordion 类来整理它的:

<div style="height:200px;width:558px;" id="box">
    <div id="1" class="accordion">1</div>
    <div id="boxmain" class="accordion boxMain"></div>
    <div id="2" class="accordion">2</div>
    <div id="3" class="accordion">3</div>
</div>

<p id="onet">Number One Text</p>
<p id="twot">Number Two Text</p>
<p id="threet">Number Three Text</p>

现在是脚本。我删除了所有 CSS 语句，因为它是用 CSS 完成的。之后我会解释 .click() 方法。

$(document).ready(function(){
    $("#boxmain").text($("#onet").text());
    $('p').hide();          

    $("#1").click(function() {
        $("#boxmain").insertAfter(this);
        $("#boxmain").effect("highlight", {color: '#DDD'}, 900);
        $("#boxmain").text($("#onet").text());
    });

    $("#2").click(function() {
        $("#boxmain").insertAfter(this);
        $("#boxmain").effect("highlight", {color: '#DDD'}, 900);
        $("#boxmain").text($("#twot").text());
    });

    $("#3").click(function() {
        $("#boxmain").insertAfter(this);
        $("#boxmain").effect("highlight", {color: '#DDD'}, 900);
        $("#boxmain").text($("#threet").text());
    });
});

click 方法使用“this”的概念来指代运行 click() 的元素。在 $("#1").click() 的情况下，$(this) 指的是 #1。您可以移动 #boxmain 元素，而不是试图四处打乱 float 。