用JQuery控制CSS浮动

Controlling CSS Float with JQuery

本文关键字：浮动 CSS 控制 JQuery      更新时间：2023-09-26

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

关于使浮子按正确的顺序停止的任何想法

我知道其他垂直手风琴也可以使用，但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());
    });
});

我可以帮你简化很多。有很多东西要读，但如果你喜欢的话，你可以先在jsfiddle上看到它的作用。您不需要交换浮动，只需交换不同的容器即可。首先，一些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——注意我是如何使用手风琴类来整理它的：

<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元素，而不是试图来回移动浮动。

您的div在标记中是这样排序的。你将无法通过改变浮动方向来获得你想要的效果。相反，您可以四处移动boxmaindiv。请考虑以下代码：

http://jsfiddle.net/Lanny/4snqy/18/

相关文章：